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

nezha-fronted/src/assets/css/common.scss

@@ -431,3 +431,8 @@ input, textarea {
     font-weight: 600;
   }
 }
+
+
+.chart-time-series.hide{
+  display: none !important;
+}

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;

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) {
+        myChart.getZr().on('mousemove', params => {
-          console.log(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)
     },

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

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: {

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">
+              <button slot="reference" class="top-tool-btn margin-r-10" @click="connect(1)" :class="{active:this.isconnect===1}">
-                on
+                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 () {
+     * @param {*} value // 1 表示不显示tooltip  // 2 表示显示tooltip  // false 表示不联动
-      this.isconnect = !this.isconnect
+     */
+    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事件

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: {