CN-1143: Network & APP Performance和DNS service insights页面均无法在趋势图中框选时间范围

src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue

@@ -288,6 +288,18 @@ export default {
             }
             this.myChart = echarts.init(document.getElementById('dnsLineChart'))
             this.myChart.setOption(this.chartOption)
+
+            this.myChart.dispatchAction({
+              type: 'takeGlobalCursor',
+              key: 'brush',
+              brushOption: {
+                brushType: 'lineX',
+                xAxisIndex: 'all',
+                brushMode: 'single',
+                throttleType: 'debounce'
+              }
+            })
+            this.myChart.on('brushEnd', this.brushEcharts)
           })
         }
       })
@@ -470,6 +482,29 @@ export default {
         this.echartsInit(this.tabs, show)
         if (!this.lineRefer) this.lineRefer = 'Average'
       }
+    },
+    /**
+     * echarts框选
+     * @param params
+     */
+    brushEcharts (params) {
+      this.myChart.dispatchAction({
+        type: 'brush',
+        areas: [] // 删除选框
+      })
+      // 避免点击空白区域报错
+      if (params.areas && params.areas.length > 0) {
+        const rangeObj = {
+          startTime: Math.ceil(params.areas[0].coordRange[0]),
+          endTime: Math.ceil(params.areas[0].coordRange[1])
+        }
+
+        // 暂定框选最小范围为5分钟，后续可能会变动
+        if (rangeObj.endTime - rangeObj.startTime < 5 * 60 * 1000) {
+          rangeObj.startTime = rangeObj.endTime - 5 * 60 * 1000
+        }
+        this.$store.commit('setRangeEchartsData', rangeObj)
+      }
     }
   },
   mounted () {

src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue

@@ -259,6 +259,18 @@ export default {
           }
           this.myChart = echarts.init(document.getElementById('linkTrafficLineChart'))
           this.myChart.setOption(this.chartOption)
+
+          this.myChart.dispatchAction({
+            type: 'takeGlobalCursor',
+            key: 'brush',
+            brushOption: {
+              brushType: 'lineX',
+              xAxisIndex: 'all',
+              brushMode: 'single',
+              throttleType: 'debounce'
+            }
+          })
+          this.myChart.on('brushEnd', this.brushEcharts)
         })
       }
     },
@@ -401,6 +413,29 @@ export default {
           if (!this.lineRefer) this.lineRefer = 'Average'
         })
       }
+    },
+    /**
+     * echarts框选
+     * @param params
+     */
+    brushEcharts (params) {
+      this.myChart.dispatchAction({
+        type: 'brush',
+        areas: [] // 删除选框
+      })
+      // 避免点击空白区域报错
+      if (params.areas && params.areas.length > 0) {
+        const rangeObj = {
+          startTime: Math.ceil(params.areas[0].coordRange[0]),
+          endTime: Math.ceil(params.areas[0].coordRange[1])
+        }
+
+        // 暂定框选最小范围为5分钟，后续可能会变动
+        if (rangeObj.endTime - rangeObj.startTime < 5 * 60 * 1000) {
+          rangeObj.startTime = rangeObj.endTime - 5 * 60 * 1000
+        }
+        this.$store.commit('setRangeEchartsData', rangeObj)
+      }
     }
   },
   mounted () {

src/views/charts2/charts/npm/NpmTrafficLine.vue

@@ -292,6 +292,18 @@ export default {
             this.myChart = echarts.init(dom)
             this.myChart.setOption(this.chartOption, true)
             this.myChart.on('legendselectchanged', this.selectLegend)
+
+            this.myChart.dispatchAction({
+              type: 'takeGlobalCursor',
+              key: 'brush',
+              brushOption: {
+                brushType: 'lineX',
+                xAxisIndex: 'all',
+                brushMode: 'single',
+                throttleType: 'debounce'
+              }
+            })
+            this.myChart.on('brushEnd', this.brushEcharts)
           })
         }
       })
@@ -435,6 +447,29 @@ export default {
       this.isNoData = false
       this.showError = true
       this.errorMsg = this.errorMsgHandler(e)
+    },
+    /**
+     * echarts框选
+     * @param params
+     */
+    brushEcharts (params) {
+      this.myChart.dispatchAction({
+        type: 'brush',
+        areas: [] // 删除选框
+      })
+      // 避免点击空白区域报错
+      if (params.areas && params.areas.length > 0) {
+        const rangeObj = {
+          startTime: Math.ceil(params.areas[0].coordRange[0]),
+          endTime: Math.ceil(params.areas[0].coordRange[1])
+        }
+
+        // 暂定框选最小范围为5分钟，后续可能会变动
+        if (rangeObj.endTime - rangeObj.startTime < 5 * 60 * 1000) {
+          rangeObj.startTime = rangeObj.endTime - 5 * 60 * 1000
+        }
+        this.$store.commit('setRangeEchartsData', rangeObj)
+      }
     }
   },
   mounted () {

src/views/charts2/charts/options/echartOption.js

@@ -227,6 +227,12 @@ export const linkTrafficLineChartOption = {
   legend: {
     show: false
   },
+  brush: {
+    toolbox: ['lineX'],
+    xAxisIndex: 'all',
+    throttleType: 'debounce',
+    transformable: false
+  },
   grid: {
     top: '12%',
     left: '2%',
@@ -391,6 +397,12 @@ export const trafficLineChartOption = {
       fontFamily: 'NotoSansSChineseRegular'
     }
   },
+  brush: {
+    toolbox: ['lineX'],
+    xAxisIndex: 'all',
+    throttleType: 'debounce',
+    transformable: false
+  },
   grid: {
     top: '21%',
     left: '2%',