NEZ-1914 feat：调研基于echarts实现时序图表多表tooltip联动

2022-06-14 16:17:47 +08:00
parent a0cdd7da4d
commit 765fc8b5df
7 changed files with 108 additions and 15 deletions
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -431,3 +431,8 @@ input, textarea {
    font-weight: 600;
  }
 }
+
+
+.chart-time-series.hide{
+  display: none !important;
+}
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -88,12 +88,15 @@
    background-color: $--background-color-empty;
    transition:all .2s;
    color: $--button-icon-color;
-
    i {
      font-size: 14px;
      color: $--button-icon-color;
    }
  }
+  .top-tool-btn.active{
+    background-color: $--button-icon-active-background-color;
+    border: 1px solid $--button-icon-active-border-color !important;
+  }
  .top-tool-btn.top-tool-btn--text {
    padding: 0 8px;
    width: unset;
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -26,7 +26,7 @@ import { formatScientificNotation } from '@/components/common/js/tools'
 import chartDataFormat from '@/components/chart/chartDataFormat'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import { chartLegendPlacement } from '@/components/common/js/constants'
-import { getChart, setChart } from '@/components/common/js/common'
+import { getChart, setChart, chartCache } from '@/components/common/js/common'
 import { initColor } from '@/components/chart/chart/tools'
 import lodash from 'lodash'

@@ -69,6 +69,36 @@ export default {
      }
    }
  },
+  watch: {
+  // 监听当前鼠标所在的图表id变化
+    '$store.state.panel.currentMousemove': {
+      handler (n) {
+        // 判断是否是当前鼠标所在的图表
+        if (n === this.chartId) {
+          let option = {}
+          for (const key in chartCache) {
+            if (!chartCache[key] || chartCache[key].group !== 'timeSeriesGroup') {
+              continue
+            }
+            if (chartCache[key] === getChart(this.chartId)) {
+              option = {
+                tooltip: {
+                  className: 'chart-time-series'
+                }
+              }
+            } else {
+              option = {
+                tooltip: {
+                  className: 'chart-time-series hide'
+                }
+              }
+            }
+            chartCache[key].setOption(option)
+          }
+        }
+      }
+    }
+  },
  methods: {
    initChart (chartOptions = this.chartOption) {
      try {
@@ -120,13 +150,21 @@ export default {
        if (!myChart) {
          return
        }
+        if (this.isInit) {
+          this.$store.commit('setCurrentMousemove', 0)
+        }
        myChart.setOption(chartOption)
        this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
        this.isInit = false
        // timeSeries类型图表设置group 用于多表联动
        myChart.group = 'timeSeriesGroup'
-        getChart(this.chartId).on('dataZoom', function (params) {
-          console.log(params)
+        myChart.getZr().on('mousemove', params => {
+          if (this.$store.state.panel.isconnect !== 1) {
+            return false
+          }
+          if (this.$store.state.panel.currentMousemove !== this.chartId) {
+            this.$store.commit('setCurrentMousemove', this.chartId)
+          }
        })
      }, 200)
    },
--- a/nezha-fronted/src/components/chart/chart/legend.vue
+++ b/nezha-fronted/src/components/chart/chart/legend.vue
@@ -44,6 +44,8 @@ import lodash from 'lodash'
 import { getChart } from '@/components/common/js/common'
 import chartDataFormat from '@/components/chart/chartDataFormat'
 import { statisticsList } from '@/components/common/js/constants'
+import * as chart from 'echarts'
+import { isTimeSeries } from './tools'
 export default {
  name: 'chartLegend',
  props: {
@@ -65,6 +67,10 @@ export default {
  computed: {
    isStatistics () {
      return !lodash.isEmpty(this.chartInfo.param.legend.values)
+    },
+    // timeSeries类型图表联动
+    isconnect () {
+      return this.$store.state.panel.isconnect
    }
  },
  methods: {
@@ -94,6 +100,10 @@ export default {
      }

      if (echarts) {
+        // 判断timeSeries类型图表 先取消多表联动
+        if (isTimeSeries(this.chartInfo.type) && this.isconnect) {
+          chart.disconnect('timeSeriesGroup')
+        }
        if (!hasGrey) { // 1.除当前legend外全置灰
          echarts.dispatchAction({
            type: 'legendInverseSelect'
@@ -116,6 +126,10 @@ export default {
          })
          this.$set(this.isGrey, index, !this.isGrey[index])
        }
+        // 判断timeSeries类型图表 建立多表联动
+        if (isTimeSeries(this.chartInfo.type) && this.isconnect) {
+          chart.connect('timeSeriesGroup')
+        }
        if (this.chartInfo.type !== 'pie' && this.chartInfo.type !== 'bar' && this.chartInfo.type !== 'treemap') {
          // 处理点击后的 Y轴
          const chartInfo = this.chartInfo
--- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
@@ -32,6 +32,7 @@ export const chartTimeSeriesLineOption = {
    }
  },
  tooltip: {
+    show: true,
    trigger: 'axis',
    confine: false,
    extraCssText: 'z-index:99999999;',
@@ -45,7 +46,6 @@ export const chartTimeSeriesLineOption = {
        show: false
      }
    }
-    // formatter: 动态生成
  },
  color: initColor(),
  grid: {
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -41,11 +41,15 @@
             </div> -->

             <!-- 测试图表联动 -->
-              <button slot="reference" class="top-tool-btn margin-r-10" @click="connect">
-                on
+              <button slot="reference" class="top-tool-btn margin-r-10" @click="connect(1)" :class="{active:this.isconnect===1}">
+                on-1
              </button>
              <!-- 测试图表联动 -->
-              <button slot="reference" class="top-tool-btn margin-r-10" @click="connect">
+              <button slot="reference" class="top-tool-btn margin-r-10" @click="connect(2)" :class="{active:this.isconnect===2}">
+                on-2
+              </button>
+              <!-- 测试图表联动 -->
+              <button slot="reference" class="top-tool-btn margin-r-10" @click="connect(false)" :class="{active:this.isconnect===false}">
                off
              </button>

@@ -153,6 +157,7 @@
 </template>

 <script>
+import { chartCache } from '@/components/common/js/common'
 import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
 import bus from '../../../libs/bus'
 import pickTime from '../../common/pickTime'
@@ -165,7 +170,6 @@ import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
 import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
 import exportHtmlMixin from '@/components/common/mixin/exportHtml'
-import { chartCache } from '@/components/common/js/common'
 import * as echarts from 'echarts'
 // import FileSaver from 'file-saver'
 // import chartData from './testData'
@@ -315,12 +319,29 @@ export default {
    }
  },
  methods: {
-    // 测试图表联动
-    connect () {
-      this.isconnect = !this.isconnect
+    /**
+     * @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')
      }
    },
@@ -357,8 +378,6 @@ export default {
        searchTime: JSON.stringify(this.searchTime),
        mode: this.mode
      }
-      console.log(param.nowTimeType)
-      console.log(param.searchTime)
      // this.getTableData()
      // this.getData(this.filter)
      const path = this.fromRoute.panel
@@ -1003,6 +1022,8 @@ export default {
      time: this.searchTime,
      nowTimeType: this.nowTimeType
    })
+    // 设置图表联动
+    this.isconnect = this.$store.state.panel.isconnect
  },
  mounted () {
    // 监听键盘ESC事件
--- a/nezha-fronted/src/store/panel.js
+++ b/nezha-fronted/src/store/panel.js
@@ -19,7 +19,11 @@ const panel = {
    topologyShow: false,
    topologyChartInfo: {},
    // 查看模式
-    mode: ''
+    mode: '',
+    // timeSeries类型图表联动
+    isconnect: false,
+    // 当前鼠标所在的图表id
+    currentMousemove: 0
  },
  mutations: {
    setShowRightBox (state, flag) {
@@ -73,6 +77,14 @@ const panel = {
    // 设置查看模式
    setMode (state, mode) {
      state.mode = mode
+    },
+    // 设置timeSeries类型图表联动
+    setConnect (state, value) {
+      state.isconnect = value
+    },
+    // 设置当前鼠标所在的图表id (timeSeries类型图表联动)
+    setCurrentMousemove (state, value) {
+      state.currentMousemove = value
    }
  },
  getters: {