gx

src/view/echarts/ylSMFW.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 220px"></div>
+  <div ref="chart" style="width: 340px;height: calc(100% - 38px)"></div>
 </template>
 
 <script setup>
@@ -51,13 +51,14 @@ const option = {
   },
   legend: {
     data: ["上门服务时长", "上门服务次数"],
-    top: "8%",
+    // top: "8%",
     textStyle: {
       fontSize: 12,
       color: "#ffffff",
     },
   },
   grid: {
+    top: "18%",
     left: "3%",
     right: "6%",
     bottom: "0%",
@@ -70,7 +71,6 @@ const option = {
   xAxis: [
     {
       type: "category",
-      //   name: "上门服务次数/元",
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
@@ -90,7 +90,7 @@ const option = {
     {
       type: "value",
       scale: true,
-      name: "上门服务时长",
+      name: "时长/小时",
       max: max,
       splitLine: {
         show: false,
@@ -118,7 +118,7 @@ const option = {
     {
       type: "value",
       scale: true,
-      name: "上门服务次数",
+      name: "次数/次",
       min: 0,
       max: max,
       splitLine: {//分割线配置

src/view/echarts/ylXZZC.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 20vh"></div>
+  <div ref="chart" style="width: 490px; height: calc(100% - 38px)"></div>
 </template>
 
 <script setup>
@@ -9,14 +9,7 @@ import * as echarts from "echarts";
 
 const chart = ref(null); // 创建DOM引用
 
-const data = [
+const data = ["大街乡", "社阳乡", "沐尘畲族乡", "庙下乡", "溪口镇", "罗家乡"];
-  "大街乡",
-  "社阳乡",
-  "沐尘畲族乡",
-  "庙下乡",
-  "溪口镇",
-  "罗家乡",
-];
 let zoomShow = false;
 if (data.length > 7) {
   zoomShow = true;
@@ -93,7 +86,8 @@ let option = {
         color: "#ffffff",
       },
     },
-      splitLine: {//分割线配置
+    splitLine: {
+      //分割线配置
       show: true,
       lineStyle: {
         color: "rgba(255, 255, 255, 0.2)",
@@ -104,14 +98,16 @@ let option = {
   yAxis: {
     type: "category",
     data: data,
-    splitLine: {//分割线配置
+    splitLine: {
+      //分割线配置
       show: false,
       lineStyle: {
         color: "#ffffff",
         width: 1,
       },
     },
-      axisLabel: {//y轴文字的配置
+    axisLabel: {
+      //y轴文字的配置
       textStyle: {
         color: "#ffffff",
       },

src/view/yl.vue

@@ -113,7 +113,7 @@
       </div>
     </div>
     <div class="displayFlex center_bg">
-      <div class="flex2">
+      <div class="flex1">
         <div class="yd_title mechanism">
           <!-- <span class="text">养老机构</span> -->
         </div>
@@ -142,17 +142,13 @@
         </div>
       </div>
       <div class="flex1">
-        <div class="yd_title service">
+        <div class="yd_title service"></div>
-          <!-- <span class="text">助老服务</span> -->
-        </div>
         <div class="serviceBox">
           <div class="serviceTop">
             <div class="visit">
               <img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
-              <div style="width: 340px;">
               <ylSMFW></ylSMFW>
             </div>
-            </div>
             <div class="medicalService">
               <img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
               <div class="medicalServiceTop">
@@ -161,16 +157,17 @@
               </div>
             </div>
           </div>
+        </div>
+      </div>
+      <div class="flex1">
         <div class="mealAssistance">
           <img
             class="mealAssistanceimg"
             src="@/assets/YLimg/ylimg7.png"
             alt=""
           />
-            <div style="width: 490px; ">
+          <ePie2 ></ePie2>
-              <ylXZZC></ylXZZC>
+          <!-- <ylXZZC></ylXZZC> -->
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -319,7 +316,7 @@ const change = (name, index) => {
       }
     }
   }
-
+}
 .mealAssistance {
   display: flex;
   flex-direction: column;
@@ -331,7 +328,6 @@ const change = (name, index) => {
     height: 35px;
   }
 }
-}
 
 .left_1 {
   background-image: url(@/assets/images/ylbx.png);