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

web/src/components/Home/Modal/DisCharge.vue

@@ -20,70 +20,75 @@ export default {
           name: '日充电电量',
           key: 'key1',
           lineColor: '#9BD801',
-          value:0,
-          d:'kW·h'
+          value: 0,
+          d: 'kW·h'
         },
         {
           name: '日放电电量',
           key: 'key2',
           lineColor: '#3DFEFA',
-          value:0,
-          d:'kW·h'
-        },
+          value: 0,
+          d: 'kW·h'
+        }
       ],
-      
+
       disChargeChart: null,
-      lineChartData: {
+      disChargeChartData: {
         ydata: [],
         xdata: []
-      },
-     
+      }
     }
   },
   watch: {
     propsInfo: {
-      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.disChargeChart = null
+  beforeUnmount() {
     window.removeEventListener('resize', this.handleResize)
+    if (this.disChargeChart) {
+      this.disChargeChart.dispose()
+      this.disChargeChart = null
+    }
   },
 
   methods: {
     handleResize() {
-      this.disChargeChart.resize()
+      if (this.disChargeChart) {
+        this.disChargeChart.resize()
+      }
     },
     processData(data, keys) {
       data.sort((a, b) => {
         return new Date(a.date) - new Date(b.date)
       })
-      const dates = data.map((item) => item.date)
-      const values=[]
-      keys.forEach((item,index)=>{
-        
-        values[index]= data.map((dataValue)=>dataValue[keys[index]])
+      const dates = data.map((item) => item.dt)
+      const values = []
+      keys.forEach((item, index) => {
+        values[index] = data.map((dataValue) => dataValue[keys[index]])
       })
-    
+
       return {
         dates,
-        values,
+        values
       }
     },
     getDisChargeData() {
-      const arr=this.curList
-      const keyList=this.curList.map((item)=>item.key)
+      const arr = this.curList
+      const keyList = this.curList.map((item) => item.key)
       const result = this.processData(this.propsInfo, keyList)
 
-      this.lineChartData.xdata = result.dates
+      this.disChargeChartData.xdata = result.dates
       arr.forEach((item, index) => {
-        this.lineChartData.ydata[index] = {
+        this.disChargeChartData.ydata[index] = {
           name: item.name,
           smooth: false,
           type: 'line',
@@ -95,18 +100,21 @@ export default {
           emphasis: {
             focus: 'series'
           },
-         
+
           global: false,
           showSymbol: false,
-          data:result.values[index]
-
+          data: result.values[index]
         }
       })
     },
 
     drawLineChart(activeKey) {
       this.getDisChargeData(activeKey)
+      if (this.disChargeChart) {
+        this.disChargeChart.dispose()
+      }
       const chartDom = document.getElementById('disCharge-chart')
+      if (!chartDom) return
       let disChargeChart = this.$echarts.init(chartDom)
       this.disChargeChart = disChargeChart
       const option = {
@@ -130,7 +138,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: this.lineChartData.xdata,
+          data: this.disChargeChartData.xdata,
           axisLine: {
             lineStyle: { type: 'dashed', color: '#435463' }
           },
@@ -147,9 +155,13 @@ export default {
             color: '#fff'
           }
         },
-        series: this.lineChartData.ydata
+        series: this.disChargeChartData.ydata
       }
       option && disChargeChart.setOption(option)
+      this.setupResizeListener()
+    },
+    setupResizeListener() {
+      window.removeEventListener('resize', this.handleResize)
       window.addEventListener('resize', this.handleResize)
     }
   }
@@ -158,8 +170,7 @@ export default {
 
 <style lang="scss" scoped>
 .disCharge {
-    height:calc(100% - 45px);
-
+  height: calc(100% - 45px);
 
   #disCharge-chart {
     height: 100%;
@@ -177,12 +188,12 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-& > div:last-child{
+  & > div:last-child {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: end;
-   }
+  }
   .mark {
     font-size: 16px;
     margin-right: 2px;
@@ -194,7 +205,7 @@ export default {
     rgba(61, 254, 250, 0.15) 49.2%,
     rgba(61, 254, 250, 0) 100%
   );
-  .d{
+  .d {
     margin-left: 1px;
     font-size: 12px;
   }