diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index d2bbb0d3e..f8b296a50 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -158,9 +158,10 @@ export default { // timeSeries类型图表设置group 用于多表联动 myChart.group = 'timeSeriesGroup' myChart.getZr().on('mousemove', params => { - if (this.$store.state.panel.isconnect !== 1) { + if (this.$store.state.panel.isConnect !== 'crosshair') { return false } + // crosshair 模式才会执行 if (this.$store.state.panel.currentMousemove !== this.chartId) { this.$store.commit('setCurrentMousemove', this.chartId) } diff --git a/nezha-fronted/src/components/chart/chart/legend.vue b/nezha-fronted/src/components/chart/chart/legend.vue index e53c55bf6..d9aade502 100644 --- a/nezha-fronted/src/components/chart/chart/legend.vue +++ b/nezha-fronted/src/components/chart/chart/legend.vue @@ -69,8 +69,8 @@ export default { return !lodash.isEmpty(this.chartInfo.param.legend.values) }, // timeSeries类型图表联动 - isconnect () { - return this.$store.state.panel.isconnect + isConnect () { + return this.$store.state.panel.isConnect } }, methods: { @@ -101,7 +101,7 @@ export default { if (echarts) { // 判断timeSeries类型图表 先取消多表联动 - if (isTimeSeries(this.chartInfo.type) && this.isconnect) { + if (isTimeSeries(this.chartInfo.type) && (this.isConnect && this.isConnect !== 'none')) { chart.disconnect('timeSeriesGroup') } if (!hasGrey) { // 1.除当前legend外全置灰 @@ -127,7 +127,7 @@ export default { this.$set(this.isGrey, index, !this.isGrey[index]) } // 判断timeSeries类型图表 建立多表联动 - if (isTimeSeries(this.chartInfo.type) && this.isconnect) { + if (isTimeSeries(this.chartInfo.type) && (this.isConnect && this.isConnect !== 'none')) { chart.connect('timeSeriesGroup') } if (this.chartInfo.type !== 'pie' && this.chartInfo.type !== 'bar' && this.chartInfo.type !== 'treemap') { diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue index e02e54f5d..9146b33e1 100644 --- a/nezha-fronted/src/components/page/dashboard/panel.vue +++ b/nezha-fronted/src/components/page/dashboard/panel.vue @@ -40,19 +40,6 @@ --> - - - - - - - @@ -294,9 +281,7 @@ export default { // 导出html 以及 pdf的弹窗 exportBoxShow: false, // 查看模式 - mode: '', - // 多表联动(timeSeries类型图表) - isconnect: false + mode: '' } }, components: { @@ -319,32 +304,6 @@ export default { } }, methods: { - /** - * @param {*} value // 1 表示不显示tooltip // 2 表示显示tooltip // false 表示不联动 - */ - connect (value) { - // 每次切换联动模式 tooltip设置显示 - const option = { - tooltip: { - className: 'chart-time-series' - } - } - for (const key in chartCache) { - if (!chartCache[key] || chartCache[key].group !== 'timeSeriesGroup') { - continue - } - chartCache[key].setOption(option) - } - this.$store.commit('setCurrentMousemove', 0) - this.isconnect = value - if (this.isconnect) { - this.$store.commit('setConnect', this.isconnect) - echarts.connect('timeSeriesGroup') - } else { - this.$store.commit('setConnect', this.isconnect) - echarts.disconnect('timeSeriesGroup') - } - }, // 更新Weight updateWeight (value) { this.panelData = JSON.parse(JSON.stringify(value)) @@ -1022,8 +981,6 @@ export default { time: this.searchTime, nowTimeType: this.nowTimeType }) - // 设置图表联动 - this.isconnect = this.$store.state.panel.isconnect }, mounted () { // 监听键盘ESC事件 @@ -1044,6 +1001,30 @@ export default { } }, watch: { + 'showPanel.params.chartShare': { + handler (value) { + // 每次切换联动模式 tooltip设置显示 + const option = { + tooltip: { + className: 'chart-time-series' + } + } + for (const key in chartCache) { + if (!chartCache[key] || chartCache[key].group !== 'timeSeriesGroup') { + continue + } + chartCache[key].setOption(option) + } + this.$store.commit('setCurrentMousemove', 0) + if (value && value !== 'none') { + this.$store.commit('setConnect', value) + echarts.connect('timeSeriesGroup') + } else { + this.$store.commit('setConnect', value) + echarts.disconnect('timeSeriesGroup') + } + } + }, 'filter.searchName': function (n, o) { const temp = this setTimeout(function () { diff --git a/nezha-fronted/src/store/panel.js b/nezha-fronted/src/store/panel.js index 8498f09aa..60fa81af4 100644 --- a/nezha-fronted/src/store/panel.js +++ b/nezha-fronted/src/store/panel.js @@ -21,7 +21,7 @@ const panel = { // 查看模式 mode: '', // timeSeries类型图表联动 - isconnect: false, + isConnect: false, // 当前鼠标所在的图表id currentMousemove: 0 }, @@ -80,7 +80,7 @@ const panel = { }, // 设置timeSeries类型图表联动 setConnect (state, value) { - state.isconnect = value + state.isConnect = value }, // 设置当前鼠标所在的图表id (timeSeries类型图表联动) setCurrentMousemove (state, value) {