gx

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,7 @@ const props = defineProps({
     },
   },
 });
-const ser = ref([
+const sers = ref([
   {
     name: "背景",
     type: "bar",
@@ -57,13 +57,14 @@ const data = reactive({
   ser: [],
   len: {
     data: [],
-    top: "5%",
+    top: "0%",
-    right: "10%",
+    right: "5%",
     textStyle: {
       fontSize: 16,
       color: "#ffffff",
     },
   },
+  formatter: "{b0}<br />",
 });
 
 const getOption = () => {
@@ -71,11 +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.len,
     grid: {
-      top: "25%",
+      top: "35%",
       left: "6%",
       right: "6%",
       bottom: "3%",
@@ -173,11 +174,18 @@ const getOption = () => {
 
 const setChart = () => {
   var myChart = echarts.init(chart.value);
+  if (clear.value) {
+    myChart.clear();
+  }
+
   myChart.setOption(data.option);
 };
 
 const setChart1 = () => {
-  data.ser = ser.value;
+  data.ser.length = 0;
+  sers.value.forEach((item) => {
+    data.ser.push(item);
+  });
   if (data.name.length > 0) {
     data.list.forEach((item) => {
       data.ser.push({
@@ -203,17 +211,33 @@ const setChart1 = () => {
       });
     });
   }
+  console.log("监听", data.ser);
+  console.log("监听1", sers.value);
 };
 
 // 监听数据
 watch(
   () => props.list,
   (newVal, oldVal) => {
+    if (newVal.length < oldVal.length) {
+      clear.value = true;
+    } else {
+      clear.value = false;
+    }
     data.list = newVal;
     data.name = props.list.map((item) => item.name);
     data.len.data = data.name;
-    // console.log(55555, 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();
   }
 );
@@ -222,7 +246,7 @@ onBeforeMount(() => {
   setTimeout(() => {
     data.list = props.list;
     data.year = props.year;
-    ser.value[0].data = data.year.map((item) => 0);
+    sers.value[0].data = data.year.map((item) => 0);
     setChart1();
     getOption();
     setChart();