年龄分布

src/view/echart_analyze/dialog_nlfb.vue

@@ -33,12 +33,12 @@ const props = defineProps({
   },
 });
 const data = reactive({
-  list: [709, 3424, 2064, 2980, ,],
-  unlist: [, , , 2980, 1790, 3100],
-  list2: [1548, 5895, 2753, 4602, ,],
-  unlist2: [, , , 4602, 2030, 3900],
-  list3: [180, 930, 632, 780, ,],
-  unlist3: [, , , 780, 520, 600],
+  list: [],
+  unlist: [],
+  list2: [],
+  unlist2: [],
+  list3: [],
+  unlist3: [],
   year: [],
   option: {},
   bg: [],
@@ -47,11 +47,30 @@ const data = reactive({
 const chart = ref(); // 创建DOM引用
 const getOption = () => {
   data.option = {
-    // tooltip: {
-    //   trigger: "axis",
-    //   padding: [20, 10, 20, 10],
-    //   formatter: "{b0}:</br>{a0}:{c0}</br>{a1}:{c1}</br>{a2}:{c2}",
-    // },
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: function (params) {
+        let result = "";
+        if (params[0].name <= data.year[2]) {
+          result = `${params[0].name}<br/>`;
+        } else {
+          result = `${params[0].name}预测数据<br/>`;
+        }
+        params.forEach(function (item, index) {
+          if (item.axisValue <= data.year[2]) {
+            if (index <= 2) {
+              result += `${item.seriesName}: ${item.value}<br/>`;
+            }
+          } else {
+            if (index > 2) {
+              result += `${item.seriesName}: ${item.value}<br/>`;
+            }
+          }
+        });
+        return result;
+      },
+    },
     legend: {
       data: ["0-18岁", "19-60岁", "60岁以上"],
       top: "3%",
@@ -416,16 +435,56 @@ watch(
   () => props.list,
   (newValue, oldValue) => {
     setTimeout(() => {
-      // data.list = props.list;
-      // data.list2 = props.list2;
-      // data.list3 = props.list3;
-      data.year = props.year;
+      change()
       getOption();
       setChart();
     }, 600);
   }
 );
-
+const change = () => {
+  data.list.length=0;
+  data.list2.length=0;
+  data.list3.length=0;
+  data.unlist.length=0;
+  data.unlist2.length=0;
+  data.unlist3.length=0;
+  props.list.forEach((item, index) => {
+    if (index <= 2) {
+      data.list.push(item);
+    } else {
+      data.list.push("");
+    }
+    if (index >= 2) {
+      data.unlist.push(item);
+    } else {
+      data.unlist.push("");
+    }
+  });
+  props.list2.forEach((item, index) => {
+    if (index <= 2) {
+      data.list2.push(item);
+    } else {
+      data.list2.push("");
+    }
+    if (index >= 2) {
+      data.unlist2.push(item);
+    } else {
+      data.unlist2.push("");
+    }
+  });
+  props.list3.forEach((item, index) => {
+    if (index <= 2) {
+      data.list3.push(item);
+    } else {
+      data.list3.push("");
+    }
+    if (index >= 2) {
+      data.unlist3.push(item);
+    } else {
+      data.unlist3.push("");
+    }
+  });
+};
 const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
@@ -433,12 +492,9 @@ const setChart = () => {
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
 };
-
 onBeforeMount(() => {
   setTimeout(() => {
-    // data.list = props.list;
-    // data.list2 = props.list2;
-    // data.list3 = props.list3;
+    change();
     data.year = props.year;
     getOption();
     setChart();