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

nezha-fronted/src/components/chart/chart/chartTimeSeries.vue

@@ -123,6 +123,11 @@ export default {
         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)
+        })
       }, 200)
     },
     getMinMaxFromData (originalDatas, chartUnit = 2) {
@@ -193,7 +198,7 @@ export default {
       return { minTime, maxTime, minValue, maxValue, copies, unit, dot }
     },
     xAxisLabelFormatter (minTime, maxTime) {
-      let self = this
+      const self = this
       return function (val, index) {
         const value = val * 1000
         let offset = localStorage.getItem('nz-sys-timezone')

nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js

@@ -38,7 +38,13 @@ export const chartTimeSeriesLineOption = {
     z: 9,
     animation: false,
     appendToBody: true,
-    className: 'chart-time-series'
+    className: 'chart-time-series',
+    axisPointer: {
+      type: 'cross', // 十字准星指示器,表示启用两个正交的轴的 axisPointer
+      label: {
+        show: false
+      }
+    }
     // formatter: 动态生成
   },
   color: initColor(),
@@ -61,9 +67,9 @@ export const chartTimeSeriesLineOption = {
       fontSize: 10
       // formatter: 动态生成
     },
-    axisPointer: { // y轴上显示指针对应的值
-      show: true
-    },
+    // axisPointer: { // y轴上显示指针对应的值
+    //   show: true
+    // },
     splitLine: {
       show: true,
       lineStyle: {

nezha-fronted/src/components/common/js/common.js

@@ -16,7 +16,7 @@ export function getUUID () {
   return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
 }
 
-const chartCache = {}
+export const chartCache = {}
 
 export function getChart (key) {
   return chartCache[`chart${key}`]

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -34,11 +34,20 @@
             </div>
 
             <div class="top-tool-right">
-<!--              <div class="top-tool-search margin-r-20">-->
-<!--                <el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive"  clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">-->
-<!--                  <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>-->
-<!--                </el-input>-->
-<!--              </div>-->
+             <!-- <div class="top-tool-search margin-r-20">
+               <el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive"  clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">
+                 <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>
+               </el-input>
+             </div> -->
+
+             <!-- 测试图表联动 -->
+              <button slot="reference" class="top-tool-btn margin-r-10" @click="connect">
+                on
+              </button>
+              <!-- 测试图表联动 -->
+              <button slot="reference" class="top-tool-btn margin-r-10" @click="connect">
+                off
+              </button>
 
               <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10" :sign="showPanel.id"></pick-time>
 
@@ -156,7 +165,9 @@ 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 FileSaver from 'file-saver'
+import { chartCache } from '@/components/common/js/common'
+import * as echarts from 'echarts'
+// import FileSaver from 'file-saver'
 // import chartData from './testData'
 export default {
   name: 'panel',
@@ -279,7 +290,9 @@ export default {
       // 导出html 以及 pdf的弹窗
       exportBoxShow: false,
       // 查看模式
-      mode: ''
+      mode: '',
+      // 多表联动（timeSeries类型图表）
+      isconnect: false
     }
   },
   components: {
@@ -302,6 +315,15 @@ export default {
     }
   },
   methods: {
+    // 测试图表联动
+    connect () {
+      this.isconnect = !this.isconnect
+      if (this.isconnect) {
+        echarts.connect('timeSeriesGroup')
+      } else {
+        echarts.disconnect('timeSeriesGroup')
+      }
+    },
     // 更新Weight
     updateWeight (value) {
       this.panelData = JSON.parse(JSON.stringify(value))
@@ -335,6 +357,8 @@ 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