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)
+          })
         }
       })
     },