系统总览图表加载销毁优化

web/src/components/Home/Charge.vue

@@ -29,7 +29,7 @@ export default {
       curList: [
         {
           name: '日充电电量',
-          key: 'chargeElect',
+          key: 'charge_elect',
           lineColor: '#00BBA3',
           colorStart: ' rgba(10, 250, 106, 0.15)',
           colorEnd: ' rgba(171, 255, 249, 0.3)',
@@ -38,7 +38,7 @@ export default {
         },
         {
           name: '日充电次数',
-          key: 'chargeNum',
+          key: 'charge_num',
           lineColor: '#3F80F2',
           colorStart: ' rgba(99, 151, 235, 0.3)',
           colorEnd: ' rgba(24, 109, 245, 0.3)',
@@ -49,7 +49,7 @@ export default {
       curListEcharts: [
         {
           name: '日充电电量',
-          key: 'chargeElect',
+          key: 'charge_elect',
           lineColor: '#00BBA3',
           colorStart: ' rgba(10, 250, 106, 0.15)',
           colorEnd: ' rgba(171, 255, 249, 0.3)',
@@ -58,7 +58,7 @@ export default {
         },
         {
           name: '日充电收益',
-          key: 'incomeCharge',
+          key: 'income_charge',
           lineColor: '#3F80F2',
           colorStart: ' rgba(99, 151, 235, 0.3)',
           colorEnd: ' rgba(24, 109, 245, 0.3)',
@@ -67,7 +67,7 @@ export default {
         }
       ],
       chargeChart: null,
-      lineChartData: {
+      chargeChartData: {
         ydata: [],
         xdata: []
       }
@@ -75,41 +75,46 @@ export default {
   },
   watch: {
     total: {
-      handler(n) {
-        if (n) {
-          let that = this
-          that.curList.forEach((item) => {
-            item.value = that.total[item.key]
+      handler(newVal,oldVal) {
+        if (newVal!==oldVal) {
+          this.curList.forEach((item) => {
+            item.value = this.total[item.key]
           })
         }
       },
-      deep: true, // 深度监听
-      immediate: true
+     
     },
     deviceInfo: {
-      handler(n) {
-        this.$nextTick(() => {
-          this.drawLineChart()
-        })
-      }
-      // immediate: true
+      handler(newVal,oldVal) {
+        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+          this.$nextTick(() => {
+            this.drawLineChart()
+          })
+        }
+      },
+      deep: true // 确保深度比较
     }
   },
   mounted() {},
-  onBeforeUnmount() {
-    this.chargeChart = null
+  beforeUnmount() {
     window.removeEventListener('resize', this.handleResize)
+    if(this.chargeChart){
+      this.chargeChart.dispose()
+      this.chargeChart = null
+    }
   },
 
   methods: {
     handleResize() {
-      this.chargeChart.resize()
+      if(this.chargeChart){
+        this.chargeChart.resize()
+      }
     },
     processData(data, keys) {
       data.sort((a, b) => {
-        return new Date(a.date) - new Date(b.date)
+        return new Date(a.dt) - new Date(b.dt)
       })
-      const dates = data.map((item) => item.date)
+      const dates = data.map((item) => item.dt)
       const values = []
       keys.forEach((item, index) => {
         values[index] = data.map((dataValue) => dataValue[keys[index]])
@@ -125,9 +130,9 @@ export default {
       const keyList = this.curListEcharts.map((item) => item.key)
       const result = this.processData(this.deviceInfo, keyList)
 
-      this.lineChartData.xdata = result.dates
+      this.chargeChartData.xdata = result.dates
       arr.forEach((item, index) => {
-        this.lineChartData.ydata[index] = {
+        this.chargeChartData.ydata[index] = {
           name: item.name,
           smooth: true,
           type: 'line',
@@ -162,7 +167,11 @@ export default {
 
     drawLineChart(activeKey) {
       this.getChargeData(activeKey)
+      if(this.chargeChart){
+        this.chargeChart.dispose()
+      }
       const chartDom = document.getElementById('charge-chart')
+      if (!chartDom) return;
       let chargeChart = this.$echarts.init(chartDom)
       this.chargeChart = chargeChart
       const option = {
@@ -186,7 +195,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: this.lineChartData.xdata,
+          data: this.chargeChartData.xdata,
           axisLine: {
             lineStyle: { type: 'dashed', color: '#435463' }
           },
@@ -200,12 +209,18 @@ export default {
             lineStyle: { type: 'dashed', color: '#435463' }
           },
           axisLabel: {
+            interval: 4,
             color: '#fff'
           }
         },
-        series: this.lineChartData.ydata
+        series: this.chargeChartData.ydata
       }
       option && chargeChart.setOption(option)
+      this.setupResizeListener()
+
+    },
+    setupResizeListener(){
+      window.removeEventListener('resize', this.handleResize);
       window.addEventListener('resize', this.handleResize)
     }
   }