1

src/view/analyze.vue

@@ -177,13 +177,13 @@ const data = reactive({
       name: "大病住院",
       value: "120",
       show: false,
-      data: ["100", "120", "199", "133", "210"], //大病住院
+      data: ["10", "12", "19", "13", "21"], //大病住院
     },
     {
       name: "高血压",
       value: "2345",
       show: false,
-      data: ["100", "120", "199", "133", "210"], //高血压
+      data: ["100", "10", "199", "13", "210"], //高血压
     },
     {
       name: "糖尿病",
@@ -260,7 +260,7 @@ const onViewData = (value, i) => {
     name: item.name,
     data: item.data,
   }));
-  // console.log(data.DataViewing, 666);
+  console.log(data.DataViewing, 666);
 
   // switch (value) {
   //   case "医保支出万元以上":

src/view/echart_analyze/eP2.vue

@@ -35,7 +35,17 @@ const props = defineProps({
     },
   },
 });
-
+const ser = ref([
+  {
+    name: "背景",
+    type: "bar",
+    data: [],
+    showBackground: true,
+    backgroundStyle: {
+      color: "rgba(180, 180, 180, 0.2)",
+    },
+  },
+]);
 const data = reactive({
   list: [],
   list1: [],
@@ -44,6 +54,7 @@ const data = reactive({
   option: {},
   bg: [],
   name: [],
+  ser: [],
 });
 
 const getOption = () => {
@@ -54,7 +65,7 @@ const getOption = () => {
       formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
     },
     legend: {
-      data: data.name,
+      data: ['医保支出万元以上','大病住院','高血压','糖尿病'],
       top: "5%",
       right: "10%",
       textStyle: {
@@ -155,59 +166,7 @@ const getOption = () => {
         },
       },
     ],
-    series: [
+    series: data.ser,
-      {
-        name: "背景",
-        type: "bar",
-        data: data.bg,
-        showBackground: true,
-        backgroundStyle: {
-          color: "rgba(180, 180, 180, 0.2)",
-        },
-      },
-      {
-        yAxisIndex: 0,
-        name: "大病住院",
-        type: "line",
-        symbol: "emptyCircle",
-        symbolSize: 10,
-        itemStyle: {
-          borderColor: "#2468FF",
-          borderWidth: 1,
-          color: "#2468FF",
-        },
-        label: {
-          show: true,
-          color: "#2468FF",
-          formatter: function (data) {
-            return data.value;
-          },
-        },
-
-        data: data.list1,
-      },
-      {
-        yAxisIndex: 1,
-        name: "糖尿病",
-        type: "line",
-        symbol: "emptyCircle",
-
-        symbolSize: 10,
-        itemStyle: {
-          borderColor: " #00FCFF ",
-          borderWidth: 1,
-          color: "#00FCFF ",
-        },
-        label: {
-          show: true,
-          color: "#00FCFF",
-          formatter: function (data) {
-            return data.value;
-          },
-        },
-        data: data.list2,
-      },
-    ],
   };
 };
 
@@ -215,42 +174,12 @@ const setChart = () => {
   var myChart = echarts.init(chart.value);
   myChart.setOption(data.option);
 };
-// const setChart1 = () => {
+
-//   if (Object.keys(data.list).length !== 0) {
-//     data.list1 = [];
-//     data.list2 = [];
-//     data.list.data.forEach((item) => {
-//       // data.list1.push(item.jzrs); //救助人数
-//       // data.list2.push(item.jzje); //救助金额
-//       data.option.series.push();
-//     });
-//     data.name = [];
-//     data.list.forEach((item) => {
-//       data.name.push(item.name); //数据名
-//     });
-//     console.log(data.list, data.name, "数据名");
-//   }
-// };
 const setChart1 = () => {
-  data.name = [];
+  data.ser = ser.value;
-  if (Object.keys(data.list).length !== 0) {
+  if (data.name.length > 0) {
-    data.list1 = [];
-    data.list2 = [];
-    // data.name = [];
-    data.option.series = [];
-    // Define background series
-    data.option.series.push({
-      name: "背景",
-      type: "bar",
-      data: data.bg,
-      showBackground: true,
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
-      },
-    });
     data.list.forEach((item) => {
-      // console.log(item, "数据名111");
+      data.ser.push({
-      data.option.series.push({
         yAxisIndex: 0,
         name: item.name,
         type: "line",
@@ -268,14 +197,10 @@ const setChart1 = () => {
             return data.value;
           },
         },
-        data: [item.data],
-      });
-    });
-    data.list.forEach((item) => {
-      data.name.push(item.name); //数据名
-    });
 
-    console.log(data.list, data.name, "数据名");
+        data: item.data,
+      });
+    });
   }
 };
 
@@ -283,25 +208,19 @@ const setChart1 = () => {
 watch(
   () => props.list,
   (newVal, oldVal) => {
-    setTimeout(() => {
     data.list = newVal;
-    // console.log("救助人1", data.list);
+    data.name = props.list.map((item) => item.name);
-    getOption();
+    // console.log(55555, data.name);
     setChart1();
     setChart();
-  }, 600);
   }
 );
 // 使用生命钩子
 onBeforeMount(() => {
   setTimeout(() => {
     data.list = props.list;
-    data.list1 = props.list1;
-    data.list2 = props.list2;
     data.year = props.year;
-    data.year.forEach(() => {
+    ser.value[0].data=data.year.map((item) => 0);
-      data.bg.push(0);
-    });
     setChart1();
     getOption();
     setChart();