gx

src/view/echarts_yl/ylSMFW.vue

@@ -1,19 +1,43 @@
 <template>
-  <div ref="chart" style="width: 340px;height:250px"></div>
+  <div ref="chart" style="width: 340px; height: 250px"></div>
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import {
+  onBeforeMount,
+  onMounted,
+  ref,
+  reactive,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
 // 局部引入echarts核心模块
+
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
 const chart = ref(); // 创建DOM引用
 
-const data = [120, 200, 150, 80, 70, 110, 130];
+const data = reactive({
+  list: [],
+  list1: [],
+  list2: [],
+  day: [],
+  option: {},
+  initialLegendData: ["上门服务时长", "上门服务次数"],
+});
+
+const data1 = [120, 200, 150, 80, 70, 110, 130];
 const lineData = [150, 230, 224, 218, 135, 147, 260];
-const max = data
+const max = data.list1.concat(data.list2).reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
-  .concat(lineData)
-  .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
 // 背景颜色
 const color = [
   {
@@ -38,203 +62,218 @@ const color = [
     ],
   },
 ];
-const option = {
+const getOption = () => {
-  color,
+  data.option = {
-  tooltip: {
+    color,
-    trigger: "axis",
+    tooltip: {
-    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
+      trigger: "axis",
-    axisPointer: {
+      formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
-      type: "cross",
+      axisPointer: {
-      label: {
+        type: "cross",
-        backgroundColor: "#3F82F7", //提示文字标题颜色
+        label: {
+          backgroundColor: "#3F82F7", //提示文字标题颜色
+        },
       },
     },
-  },
+    legend: {
-  legend: {
+      data: data.initialLegendData,
-    data: ["上门服务时长", "上门服务次数"],
+      // top: "8%",
-    // top: "8%",
+      textStyle: {
-    textStyle: {
+        fontSize: 16,
-      fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    grid: {
+      top: "18%",
+      left: "3%",
+      right: "6%",
+      bottom: "0%",
+      containLabel: true,
       color: "#ffffff",
+      fontSize: 16,
     },
-  },
+    calculable: true,
-  grid: {
+
-    top: "18%",
+    xAxis: [
-    left: "3%",
+      {
-    right: "6%",
+        type: "category",
-    bottom: "0%",
+        axisLabel: {
-    containLabel: true,
+          //坐标轴刻度标签的相关设置
-    color: "#ffffff",
+          textStyle: {
-    fontSize: 16,
+            color: "#ffffff",
-  },
+            fontSize: 16,
-  calculable: true,
+          },
-  
-  xAxis: [
-    {
-      type: "category",
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
-          color: "#ffffff",
-          fontSize: 16,
         },
+        axisTick: {
+          show: false, // 设置轴刻度不显示
+        },
+        data: data.day,
       },
-      axisTick: {
+      {
-      show: false, // 设置轴刻度不显示
+        type: "category",
-    },
-      data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
-    },
-    {
-      type: "category",
-      show: false,
-      data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
-    },
-  ],
-  yAxis: [
-    {
-      type: "value",
-      scale: true,
-      name: "时长/小时",
-      max: max,
-      splitLine: {
         show: false,
-        lineStyle: {
+        data: data.day,
-          color: "rgba(255, 255, 255, 0.3)",
+      },
-          fontSize: 16,
+    ],
-          width: 1,
+    yAxis: [
+      {
+        type: "value",
+        scale: true,
+        name: "时长/小时",
+        max: max,
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.3)",
+            fontSize: 16,
+            width: 1,
+          },
         },
-      },
+        axisLabel: {
-      axisLabel: {
+          //坐标轴刻度标签的相关设置
-        //坐标轴刻度标签的相关设置
+          textStyle: {
-        textStyle: {
+            color: "#ffffff",
-          color: "#ffffff",
+            fontSize: 16,
-          fontSize: 16,
+          },
         },
-      },
+        axisLine: {
-      axisLine: {
+          //y轴线的颜色以及宽度
-        //y轴线的颜色以及宽度
+          show: false,
-        show: false,
+          lineStyle: {
-        lineStyle: {
+            color: "#ffffff",
-          color: "#ffffff",
+            fontSize: 16,
-          fontSize: 16,
+            width: 1,
-          width: 1,
+            type: "solid",
-          type: "solid",
-        },
-      },
-    },
-    {
-      type: "value",
-      scale: true,
-      name: "次数/次",
-      min: 0,
-      max: max,
-      splitLine: {//分割线配置
-        show: false,
-        lineStyle: {
-          color: "rgba(255, 255, 255, 0.3)",
-          width: 1,
-          fontSize: 16,
-        },
-      },
-      axisLabel: {//y轴文字的配置
-        textStyle: {
-          color: "#ffffff",
-          fontSize: 16,
-        },
-      },
-      axisLine: {
-        //y轴线的颜色以及宽度
-        show: false,
-        lineStyle: {
-          color: "#ffffff",
-          fontSize: 16,
-          width: 1,
-          type: "solid",
-        },
-      },
-    },
-  ],
-  series: [
-    {
-      name: "上门服务时长",
-      data: data,
-      barWidth: 20,
-      type: "bar",
-         label:{
-        show:true,
-        color:'#ffffff',
-        formatter:function(data){
-          return data.value
-        }
-      },
-    },
-    {
-      name: "上门服务次数",
-      data: lineData,
-      type: "line", //线状图
-         label:{
-        show:true,
-        position:'top',
-        color:'#ffffff',
-        formatter:function(data){
-          return data.value
-        }
-      },
-      itemStyle: {
-        borderColor: "#00FCFF",
-        borderWidth: 1,
-        color: "#00FCFF",
-      },
-    },
-    {
-      xAxisIndex: 1,
-      itemStyle: {
-        color: "rgba(180, 180, 180, 0.2)", //外阴影背景
-      },
-      data: data.map(() => max),
-      barWidth: 40, //外阴影背景宽
-      emphasis: {
-        itemStyle: {
-          color: {
-            type: "linear",
-            x: 0,
-            x2: 0,
-            y: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: "rgba(64, 247, 176, 0.25)",
-              },
-              {
-                offset: 1,
-                color: "rgba(17, 34, 64, 0.25)",
-              },
-            ],
           },
         },
       },
-      type: "bar",
+      {
-    },
+        type: "value",
-  ],
+        scale: true,
+        name: "次数/次",
+        min: 0,
+        max: max,
+        splitLine: {
+          //分割线配置
+          show: false,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.3)",
+            width: 1,
+            fontSize: 16,
+          },
+        },
+        axisLabel: {
+          //y轴文字的配置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: "上门服务时长",
+        data: data.list1,
+        barWidth: 20,
+        type: "bar",
+        label: {
+          show: true,
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+      },
+      {
+        name: "上门服务次数",
+        data: data.list2,
+        type: "line", //线状图
+        label: {
+          show: true,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#00FCFF",
+        },
+      },
+      {
+        xAxisIndex: 1,
+        itemStyle: {
+          color: "rgba(180, 180, 180, 0.2)", //外阴影背景
+        },
+        data: data.list1.map(() => max),
+        barWidth: 40, //外阴影背景宽
+        emphasis: {
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 0,
+              y: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "rgba(64, 247, 176, 0.25)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(17, 34, 64, 0.25)",
+                },
+              ],
+            },
+          },
+        },
+        type: "bar",
+      },
+    ],
+  };
+};
+
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+
+const setChart1 = () => {
+  data.list1 = [];
+  data.list2 = [];
+  data.list.data.forEach((item) => {
+    data.list1.push(item.sc); //服务时长
+    data.list2.push(item.fwcs); //服务次数
+  });
+  console.log(data.list1,data.list2, "助老服务");
 };
 
 // 使用生命钩子
-onMounted(() => {
+onBeforeMount(() => {
-  // 基于准备好的dom，初始化echarts实例
+  setTimeout(() => {
-  // var myChart = echarts.init(document.getElementById('main'));
+    data.list = props.list;
-  // Vue3中： 需要引入
+    data.day = props.list.day;
-  var myChart = echarts.init(chart.value);
+    // console.log(data.list, "助老服务");
-
+    setChart1();
-  // init(); // vue3.2没有this
+    getOption();
-  // 使用刚指定的配置项和数据显示图表。
+    setChart();
-  myChart.setOption(option);
+  }, 600);
-
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
 });
+
 </script>
 
 <style scoped></style>

src/view/yl.vue

@@ -51,9 +51,9 @@
       <div class="flex1" style="margin-top: 10px">
         <div class="yd_title left_2">
           <div class="animate-border">
-          <i></i>
+            <i></i>
-          <i></i>
+            <i></i>
-        </div>
+          </div>
           <span class="text">
             <img
               v-if="leftchoose.second == '1'"
@@ -97,9 +97,9 @@
       <div class="flex1" style="margin-top: 10px">
         <div class="yd_title left_3">
           <div class="animate-border">
-          <i></i>
+            <i></i>
-          <i></i>
+            <i></i>
-        </div>
+          </div>
           <span class="text">
             <img
               v-if="leftchoose.third == '1'"
@@ -145,9 +145,9 @@
       <div class="flex1">
         <div class="yd_title center_1">
           <div class="animate-border">
-          <i></i>
+            <i></i>
-          <i></i>
+            <i></i>
-        </div>
+          </div>
         </div>
         <div class="minTopPart">
           <div class="mtpImg1"></div>
@@ -161,9 +161,9 @@
       <div class="flex1">
         <div class="yd_title familyPlanning">
           <div class="animate-border">
-          <i></i>
+            <i></i>
-          <i></i>
+            <i></i>
-        </div>
+          </div>
         </div>
         <ylJHSY
           :list1="data.centerBottom1"
@@ -176,9 +176,9 @@
       <div class="flex1">
         <div class="yd_title mechanism">
           <div class="animate-border">
-          <i></i>
+            <i></i>
-          <i></i>
+            <i></i>
-        </div>
+          </div>
         </div>
         <div class="history">
           <div class="history1">
@@ -207,15 +207,15 @@
       <div class="flex1">
         <div class="yd_title service">
           <div class="animate-border">
-          <i></i>
+            <i></i>
-          <i></i>
+            <i></i>
-        </div>
+          </div>
         </div>
         <div class="serviceBox">
           <div class="serviceTop">
             <div class="visit">
               <img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
-              <ylSMFW></ylSMFW>
+              <ylSMFW :list="data.smfwcs"></ylSMFW>
             </div>
             <div class="medicalService">
               <img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
@@ -392,6 +392,7 @@ const data = reactive({
   yljgzlzx: { yljg: "", zlzx: "" },
   zccs1: [],
   zccs2: [],
+  smfwcs: [],
 });
 onBeforeMount(async () => {
   getData();
@@ -454,6 +455,7 @@ const getData = async () => {
       data.yljgzlzx.yljg = res.data.yljgzlzx.yljg;
       data.yljgzlzx.zlzx = res.data.yljgzlzx.zlzx;
       // 助老服务
+      data.smfwcs = res.data.zlfw.smfwcs;
       // 乡镇助餐次数
       res.data.zlfw.xzzccs.forEach((element) => {
         data.zccs1.push(element.xzjd); // 地点