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

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

@@ -29,7 +29,7 @@ export default {
        
       ],
       revenueChart: null,
-      lineChartData: {
+      RevenueChartData: {
         ydata: [],
         xdata: []
       },
@@ -38,29 +38,37 @@ export default {
   },
   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.revenueChart = null
+  beforeUnmount() {
     window.removeEventListener('resize', this.handleResize)
+    if (this.revenueChart) {
+      this.revenueChart.dispose()
+      this.revenueChart = null
+    }
   },
 
   methods: {
     handleResize() {
-      this.revenueChart.resize()
+      if (this.revenueChart) {
+     
+        this.revenueChart.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 dates = data.map((item) => item.dt)
       const values=[]
       keys.forEach((item,index)=>{
         
@@ -77,9 +85,9 @@ export default {
       const keyList=this.curList.map((item)=>item.key)
       const result = this.processData(this.propsInfo, keyList)
 
-      this.lineChartData.xdata = result.dates
+      this.RevenueChartData.xdata = result.dates
       arr.forEach((item, index) => {
-        this.lineChartData.ydata[index] = {
+        this.RevenueChartData.ydata[index] = {
           name: item.name,
           smooth: true,
           type: 'line',
@@ -115,7 +123,11 @@ export default {
 
     drawLineChart(activeKey) {
       this.getRevenueData(activeKey)
+      if (this.revenueChart) {
+        this.revenueChart.dispose()
+      }
       const chartDom = document.getElementById('revenue-chart')
+      if (!chartDom) return
       let revenueChart = this.$echarts.init(chartDom)
       this.revenueChart = revenueChart
       const option = {
@@ -139,7 +151,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: this.lineChartData.xdata,
+          data: this.RevenueChartData.xdata,
           axisLine: {
             lineStyle: { type: 'dashed', color: '#435463' }
           },
@@ -156,9 +168,14 @@ export default {
             color: '#fff'
           }
         },
-        series: this.lineChartData.ydata
+        series: this.RevenueChartData.ydata
       }
       option && revenueChart.setOption(option)
+      this.setupResizeListener()
+
+    },
+    setupResizeListener() {
+      window.removeEventListener('resize', this.handleResize)
       window.addEventListener('resize', this.handleResize)
     }
   }