gx

src/view/echarts_yl/ylSMFW.vue

@@ -3,17 +3,41 @@
 </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,7 +62,8 @@ const color = [
     ],
   },
 ];
-const option = {
+const getOption = () => {
+  data.option = {
     color,
     tooltip: {
       trigger: "axis",
@@ -51,7 +76,7 @@ const option = {
       },
     },
     legend: {
-    data: ["上门服务时长", "上门服务次数"],
+      data: data.initialLegendData,
       // top: "8%",
       textStyle: {
         fontSize: 16,
@@ -82,12 +107,12 @@ const option = {
         axisTick: {
           show: false, // 设置轴刻度不显示
         },
-      data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
+        data: data.day,
       },
       {
         type: "category",
         show: false,
-      data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
+        data: data.day,
       },
     ],
     yAxis: [
@@ -128,7 +153,8 @@ const option = {
         name: "次数/次",
         min: 0,
         max: max,
-      splitLine: {//分割线配置
+        splitLine: {
+          //分割线配置
           show: false,
           lineStyle: {
             color: "rgba(255, 255, 255, 0.3)",
@@ -136,7 +162,8 @@ const option = {
             fontSize: 16,
           },
         },
-      axisLabel: {//y轴文字的配置
+        axisLabel: {
+          //y轴文字的配置
           textStyle: {
             color: "#ffffff",
             fontSize: 16,
@@ -157,28 +184,28 @@ const option = {
     series: [
       {
         name: "上门服务时长",
-      data: data,
+        data: data.list1,
         barWidth: 20,
         type: "bar",
         label: {
           show: true,
-        color:'#ffffff',
+          color: "#ffffff",
           formatter: function (data) {
-          return data.value
+            return data.value;
-        }
+          },
         },
       },
       {
         name: "上门服务次数",
-      data: lineData,
+        data: data.list2,
         type: "line", //线状图
         label: {
           show: true,
-        position:'top',
+          position: "top",
-        color:'#ffffff',
+          color: "#ffffff",
           formatter: function (data) {
-          return data.value
+            return data.value;
-        }
+          },
         },
         itemStyle: {
           borderColor: "#00FCFF",
@@ -191,7 +218,7 @@ const option = {
         itemStyle: {
           color: "rgba(180, 180, 180, 0.2)", //外阴影背景
         },
-      data: data.map(() => max),
+        data: data.list1.map(() => max),
         barWidth: 40, //外阴影背景宽
         emphasis: {
           itemStyle: {
@@ -218,23 +245,35 @@ const option = {
       },
     ],
   };
+};
+
+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

@@ -215,7 +215,7 @@
           <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); // 地点