添加显示多个指标的统计

src/App.vue

@@ -12,6 +12,25 @@ export default {
     IndexPage
   }
 }
+const debounce = (fn, delay) => {
+  let timer
+   return (...args) => {
+     if (timer) {
+       clearTimeout(timer)
+     }
+     timer = setTimeout(() => {
+       fn(...args)
+     }, delay)
+   }
+}
+  
+const _ResizeObserver = window.ResizeObserver;
+window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
+   constructor(callback) {
+     callback = debounce(callback, 200);
+     super(callback);
+   }
+}
 const siderBarWidth = ref("200px");
 const toggleMenu = ()=>{
   if(siderBarWidth.value == "200px")

src/views/ShowGraph.vue

@@ -309,93 +309,76 @@ for (let i = 0; i < years.length; i++) {
   }
     return counts;
     },
-//     generateOptions(counts)
+    generateyAxis(counts)
-//     {
+    {
-//       option = {
+      let yAxis = [];
-//   tooltip: {
+
-//     trigger: 'axis',
+// Generate Evaporation and Precipitation yAxis
-//     axisPointer: {
+for (let i = 0; i < counts.length; i++) {
-//       type: 'cross'
+  yAxis.push({
-//     }
+    type: 'value',
-//   },
+    name: this.srow2[i],
-//   grid: {
+    position: 'right',
-//     right: '20%'
+    offset:i*40,
-//   },
+    alignTicks: true,
-//   toolbox: {
+  });
-//     feature: {
+}
-//       dataView: { show: true, readOnly: false },
+return yAxis;
-//       restore: { show: true },
+    },
-//       saveAsImage: { show: true }
+    generateSeries2(counts)
-//     }
+    {
-//   },
+      let Series= [];
-//   legend: {
+
-//     data: ['Evaporation', 'Precipitation', 'Temperature']
+// Generate Evaporation and Precipitation yAxis
-//   },
+    for (let i = 0; i < counts.length; i++) {
-//   xAxis: [
+      Series.push({
-//     {
+        
-//       type: 'category',
+      name: this.srow2[i],
-//       axisTick: {
+      type: this.stype,
-//         alignWithLabel: true
+      data: Object.values(counts[i]),
-//       },
+    },
-//       // prettier-ignore
+      );
-//       data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    
-//     }
+    return Series;
-//   ],
+    }
-//   yAxis: [
+  },
-//     {
+    generateOptions(counts)
-//       type: 'value',
+    {
-//       name: 'Evaporation',
+      
-//       position: 'right',
+    let   option = {
-//       alignTicks: true,
+  tooltip: {
-//       axisLabel: {
+    trigger: 'axis',
-//         formatter: '{value} ml'
+    axisPointer: {
-//       }
+      type: 'cross'
-//     },
+    }
-//     {
+  },
-//       type: 'value',
+  grid: {
-//       name: 'Precipitation',
+    right: '20%'
-//       position: 'right',
+  },
-//       alignTicks: true,
+  toolbox: {
-//       offset: 80,
+    feature: {
-//       axisLabel: {
+      dataView: { show: true, readOnly: false },
-//         formatter: '{value} ml'
+      restore: { show: true },
-//       }
+      saveAsImage: { show: true }
-//     },
+    }
-//     {
+  },
-//       type: 'value',
+  legend: {
-//       name: '温度',
+    data: this.srow2
-//       position: 'left',
+  },
-//       alignTicks: true,
+  xAxis: [
-//       axisLabel: {
+    {
-//         formatter: '{value} °C'
+      type: 'category',
-//       }
+      axisTick: {
-//     }
+        alignWithLabel: true
-//   ],
+      },
-//   series: [
+      // prettier-ignore
-//     {
+      data: Object.keys(counts[0])
-//       name: 'Evaporation',
+    }
-//       type: 'bar',
+  ],
-//       data: [
+  yAxis: this.generateyAxis(counts),
-//         2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+  series: this.generateSeries2(counts),
-//       ]
+};return option;
-//     },
+    },
-//     {
-//       name: 'Precipitation',
-//       type: 'bar',
-//       yAxisIndex: 1,
-//       data: [
-//         2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-//       ]
-//     },
-//     {
-//       name: 'Temperature',
-//       type: 'line',
-//       yAxisIndex: 2,
-//       data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
-//     }
-//   ]
-// };
-//     },
     handlerow()
     {
       this.srow='';
@@ -721,6 +704,11 @@ currentDate.setDate(currentDate.getDate()+1);
   grid: [{ bottom: '55%' }, { top: '55%' }],
   series: this.generateSeries(counts)
 };
+    }
+    if (this.selectedEntity=='entity4')
+    {
+      option=this.generateOptions(counts);
+      console.log(option)
     }
       this.chartInstance.setOption(option);
       }catch(error)
@@ -834,14 +822,8 @@ currentDate.setDate(currentDate.getDate()+1);
         const counts=this.countDataByInterval();
         setTimeout(()=>this.drawChart(counts),500);
       }else if(this.selectedEntity=='entity4'){
-        this.do_entity4();
+       let  counts=this.do_entity4();
-        if (this.srow2!='entity'){
-          const counts=this.countsumbystring();
           setTimeout(()=>this.drawChart(counts),500);
-        } else {
-          const counts=this.countStrings();
-          setTimeout(()=>this.drawChart(counts),500);
-        }
       } 
       else if (this.selectedEntity=='entity5'){
         const counts=this.count_sum_time();