From 35004f419a097432d8edf803521116c78879eda9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com> Date: Mon, 3 Jul 2023 14:07:28 +0800 Subject: [PATCH] =?UTF-8?q?CN-1143:=20Network=20&=20APP=20Performance?= =?UTF-8?q?=E5=92=8CDNS=20service=20insights=E9=A1=B5=E9=9D=A2=E5=9D=87?= =?UTF-8?q?=E6=97=A0=E6=B3=95=E5=9C=A8=E8=B6=8B=E5=8A=BF=E5=9B=BE=E4=B8=AD?= =?UTF-8?q?=E6=A1=86=E9=80=89=E6=97=B6=E9=97=B4=E8=8C=83=E5=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts/dnsInsight/DnsTrafficLine.vue | 35 +++++++++++++++++++ .../charts/linkMonitor/LinkTrafficLine.vue | 35 +++++++++++++++++++ .../charts2/charts/npm/NpmTrafficLine.vue | 35 +++++++++++++++++++ .../charts2/charts/options/echartOption.js | 12 +++++++ 4 files changed, 117 insertions(+) diff --git a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue index 16ba203f..c6ad32d4 100644 --- a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue +++ b/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 () { diff --git a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue index feef64f6..204a6eea 100644 --- a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue +++ b/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 () { diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue index 029feb08..e2f0c84e 100644 --- a/src/views/charts2/charts/npm/NpmTrafficLine.vue +++ b/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 () { diff --git a/src/views/charts2/charts/options/echartOption.js b/src/views/charts2/charts/options/echartOption.js index 0cd61935..fb40ff8c 100644 --- a/src/views/charts2/charts/options/echartOption.js +++ b/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%',