gx

src/view/analyze.vue

@@ -44,12 +44,7 @@
               <span> {{ item.name }}</span>
             </div>
           </div>
-          <eP2
+          <eP2 :list="data.DataViewing" :year="data.leftCenterYear"></eP2>
-            :list="data.DataViewing"
-            :list1="data.leftCenter3"
-            :list2="data.leftCenter4"
-            :year="data.leftCenterYear"
-          ></eP2>
         </div>
       </div>
     </div>
@@ -119,7 +114,7 @@
             <i></i>
           </div>
         </div>
-          <!-- <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" /> -->
+        <!-- <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" /> -->
         <right2></right2>
       </div>
       <div class="flex1">
@@ -170,38 +165,38 @@ const data = reactive({
     {
       name: "医保支出万元以上",
       value: "11112",
-      show: false,
+      show: true,
       data: ["100", "120", "199", "133", "210"], //医保支出万元以上
     },
     {
       name: "大病住院",
       value: "120",
       show: false,
-      data: ["100", "120", "199", "133", "210"], //大病住院
+      data: ["100", "0", "199", "133", "210"], //大病住院
     },
     {
       name: "高血压",
       value: "2345",
       show: false,
-      data: ["100", "120", "199", "133", "210"], //高血压
+      data: ["100", "10", "199", "133", "210"], //高血压
     },
     {
       name: "糖尿病",
       value: "1241",
       show: false,
-      data: ["100", "120", "199", "133", "210"], //糖尿病
+      data: ["100", "120", "19", "133", "210"], //糖尿病
     },
     {
       name: "高血脂",
       value: "1414",
       show: false,
-      data: ["100", "120", "199", "133", "210"], //高血脂
+      data: ["100", "120", "199", "13", "210"], //高血脂
     },
     {
       name: "高血糖",
       value: "2355",
       show: false,
-      data: ["100", "120", "199", "133", "210"], //高血糖
+      data: ["100", "120", "199", "133", "10"], //高血糖
     },
     {
       name: "残疾",
@@ -228,11 +223,16 @@ const data = reactive({
       data: ["100", "120", "199", "133", "210"], //其他疾病
     },
   ],
-  DataViewing: {}, //数据查看
+  DataViewing: [
-  leftCenter1: ["100", "120", "199", "133", "210"], //医保支出万元以上
+    {
-  leftCenter3: ["100", "80", "199", "133", "210"], //大病住院
+      name: "医保支出万元以上",
-  leftCenter4: ["100", "120", "199", "133", "210"], //糖尿病
+      data: ["100", "120", "199", "133", "210"], //医保支出万元以上
+    },
+  ], //数据查看
   leftCenterYear: ["2019", "2020", "2021", "2022", "2023"], //年份
+  // leftCenter1: ["100", "120", "199", "133", "210"], //医保支出万元以上
+  // leftCenter3: ["100", "80", "199", "133", "210"], //大病住院
+  // leftCenter4: ["100", "120", "199", "133", "210"], //糖尿病
 
   zccs1: ["图书馆", "交通出行", "景区"], //一码通
   zccs2: ["100", "130", "220"], //一码通

src/view/echart_analyze/eP2.vue

@@ -8,7 +8,7 @@ import { onBeforeMount, reactive, ref, watch } from "vue";
 import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
-
+const clear = ref(false);
 const props = defineProps({
   list: {
     type: Array,
@@ -35,7 +35,17 @@ const props = defineProps({
     },
   },
 });
-
+const sers = ref([
+  {
+    name: "背景",
+    type: "bar",
+    data: [],
+    showBackground: true,
+    backgroundStyle: {
+      color: "rgba(180, 180, 180, 0.2)",
+    },
+  },
+]);
 const data = reactive({
   list: [],
   list1: [],
@@ -44,6 +54,17 @@ const data = reactive({
   option: {},
   bg: [],
   name: [],
+  ser: [],
+  len: {
+    data: [],
+    top: "0%",
+    right: "5%",
+    textStyle: {
+      fontSize: 16,
+      color: "#ffffff",
+    },
+  },
+  formatter: "{b0}<br />",
 });
 
 const getOption = () => {
@@ -51,19 +72,11 @@ const getOption = () => {
     tooltip: {
       trigger: "axis",
       padding: [20, 10, 20, 10],
-      formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
+      formatter: data.formatter,
-    },
-    legend: {
-      data: data.name,
-      top: "5%",
-      right: "10%",
-      textStyle: {
-        fontSize: 16,
-        color: "#ffffff",
-      },
     },
+    legend: data.len,
     grid: {
-      top: "25%",
+      top: "35%",
       left: "6%",
       right: "6%",
       bottom: "3%",
@@ -155,102 +168,27 @@ 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,
-      },
-    ],
   };
 };
 
 const setChart = () => {
   var myChart = echarts.init(chart.value);
+  if (clear.value) {
+    myChart.clear();
+  }
+
   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.length = 0;
-  if (Object.keys(data.list).length !== 0) {
+  sers.value.forEach((item) => {
-    data.list1 = [];
+    data.ser.push(item);
-    data.list2 = [];
+  });
-    // data.name = [];
+  if (data.name.length > 0) {
-    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,40 +206,47 @@ const setChart1 = () => {
             return data.value;
           },
         },
-        data: [item.data],
+
+        data: item.data,
       });
     });
-    data.list.forEach((item) => {
-      data.name.push(item.name); //数据名
-    });
-
-    console.log(data.list, data.name, "数据名");
   }
+  console.log("监听", data.ser);
+  console.log("监听1", sers.value);
 };
 
 // 监听数据
 watch(
   () => props.list,
   (newVal, oldVal) => {
-    setTimeout(() => {
+    if (newVal.length < oldVal.length) {
+      clear.value = true;
+    } else {
+      clear.value = false;
+    }
     data.list = newVal;
-    // console.log("救助人1", data.list);
+    data.name = props.list.map((item) => item.name);
-    getOption();
+    data.len.data = data.name;
+    sers.value[0].data = data.year.map((item) => 0);
+    data.formatter = "{b0}<br />";
+    if (data.name.length > 0) {
+      for (let i = 1; i <= data.name.length; i++) {
+        let s1 = `{a${i}}:{c${i}}<br />`;
+        data.formatter += s1;
+      }
+    }
+
     setChart1();
+    getOption();
     setChart();
-  }, 600);
   }
 );
 // 使用生命钩子
 onBeforeMount(() => {
   setTimeout(() => {
     data.list = props.list;
-    data.list1 = props.list1;
-    data.list2 = props.list2;
     data.year = props.year;
-    data.year.forEach(() => {
+    sers.value[0].data = data.year.map((item) => 0);
-      data.bg.push(0);
-    });
     setChart1();
     getOption();
     setChart();