From 4af4dc4260dd185a08ea391d44a7e3481f20eb5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Tue, 28 Mar 2023 16:19:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=8A=98=E7=BA=BF?=
 =?UTF-8?q?=E5=9B=BE=E5=88=87=E6=8D=A2=E4=B8=8D=E5=90=8C=E9=80=89=E9=A1=B9?=
 =?UTF-8?q?=E5=90=8E=EF=BC=8C=E5=9B=BE=E5=BD=A2=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=E5=81=B6=E7=8E=B0=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../charts2/charts/dnsInsight/DnsTrafficLine.vue  | 10 +++++++---
 .../charts/linkMonitor/LinkTrafficLine.vue        | 12 +++++++++---
 src/views/charts2/charts/npm/NpmTrafficLine.vue   | 15 +++++++++++----
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
index 84ec4b49..16ba203f 100644
--- a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
+++ b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
@@ -199,8 +199,6 @@ export default {
         }
         const _this = this
         if (echartsData.length > 0) {
-          const dom = document.getElementById('dnsLineChart')
-          !this.myChart && (this.myChart = echarts.init(dom))
           this.chartOption = stackedLineChartOption
           const chartOption = this.chartOption.series[0]
           this.chartOption.series = echartsData.map((t, i) => {
@@ -284,7 +282,13 @@ export default {
             return stackedLineTooltipFormatter(params)
           }
           this.showMarkLine = true
-          this.myChart.setOption(this.chartOption)
+          this.$nextTick(() => {
+            if (this.myChart) {
+              this.myChart.dispose()
+            }
+            this.myChart = echarts.init(document.getElementById('dnsLineChart'))
+            this.myChart.setOption(this.chartOption)
+          })
         }
       })
     },
diff --git a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
index 4095d270..feef64f6 100644
--- a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
@@ -197,8 +197,8 @@ export default {
         }
 
         const _this = this
-        const dom = document.getElementById('linkTrafficLineChart')
-        !this.myChart && (this.myChart = echarts.init(dom))
+        // const dom = document.getElementById('linkTrafficLineChart')
+        // !this.myChart && (this.myChart = echarts.init(dom))
 
         this.chartOption = linkTrafficLineChartOption
         const chartOption = this.chartOption.series[0]
@@ -253,7 +253,13 @@ export default {
         }
 
         this.showMarkLine = true
-        this.myChart.setOption(this.chartOption)
+        this.$nextTick(() => {
+          if (this.myChart) {
+            this.myChart.dispose()
+          }
+          this.myChart = echarts.init(document.getElementById('linkTrafficLineChart'))
+          this.myChart.setOption(this.chartOption)
+        })
       }
     },
     activeChange (item, index) {
diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue
index d5de5c94..952e45c6 100644
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue
@@ -212,8 +212,8 @@ export default {
       echartsData = echartsData.filter(t => t.show === true)
       this.$nextTick(() => {
         if (echartsData.length > 0) {
-          const dom = this.$refs['chart-line']
-          !this.myChart && (this.myChart = echarts.init(dom))
+          // const dom = this.$refs['chart-line']
+          // !this.myChart && (this.myChart = echarts.init(dom))
 
           this.chartOption = _.cloneDeep(trafficLineChartOption)
           const chartOption = this.chartOption.series[0]
@@ -275,8 +275,15 @@ export default {
             return stackedLineTooltipFormatter(params)
           }
 
-          this.myChart.on('legendselectchanged', this.selectLegend)
-          this.myChart.setOption(this.chartOption, true)
+          this.$nextTick(() => {
+            if (this.myChart) {
+              this.myChart.dispose()
+            }
+            const dom = this.$refs['chart-line']
+            this.myChart = echarts.init(dom)
+            this.myChart.setOption(this.chartOption, true)
+            this.myChart.on('legendselectchanged', this.selectLegend)
+          })
         }
       })
     },