NEZ-3083 fix：优化划过数据点

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

@@ -7,7 +7,7 @@
     v-my-loading="chartLoading"
   >
     <div class="chart__canvas" style="position:relative">
-      <div :id="`chart-canvas-${chartId}`"></div>
+      <div :id="`chart-canvas-${chartId}`" :class="{'chart-cursor-default':cursorDefault}"></div>
       <!-- 右y轴name -->
       <p class="rightYAxis-name" v-if="hasRightYAxis">
         <span>{{chartInfo.param.rightYAxis.label}}</span>
@@ -72,6 +72,7 @@ export default {
       isStack: false,
       hasRightYAxis: false,
       chartLoading: false,
+      cursorDefault: false,
       tooltip: {
         x: 0,
         y: 0,
@@ -247,6 +248,20 @@ export default {
           }
         }
         if (this.isInit) {
+          // 未设置dataLink的图表 鼠标样式为default
+          myChart.getZr().on('mousemove', (params) => {
+          // 获取鼠标在图表中的坐标
+            const pointInPixel = [params.offsetX, params.offsetY]
+            const option = myChart.getOption()
+            const zoomState = this.$lodash.get(option, 'toolbox[0].feature.dataZoom.iconStatus.zoom', 'normal')
+            // 判断鼠标在坐标轴中且zoom未被激活
+            if (myChart.containPixel('grid', pointInPixel) && zoomState === 'normal') {
+              this.cursorDefault = true
+            } else {
+              this.cursorDefault = false
+            }
+          })
+
           if (this.series.length > 1) {
             myChart.on('click', this.chartClick)
             myChart.on('mousedown', (params) => {
@@ -257,27 +272,46 @@ export default {
             })
           }
 
-          myChart.on('mouseover', (params) => {
+          // 鼠标滑过当前symbol 改变样式
+          myChart.on('mousemove', (params) => {
+            if (this.series.length > 1) {
+              myChart.on('mousemove', () => {
+                this.cursorDefault = false
+              })
+            }
             if (this.chartInfo.type !== 'point') {
-              if (this.tooltip.activeIndex != params.seriesIndex) {
+              const option = myChart.getOption()
-                const option = myChart.getOption()
+              const series = this.$lodash.cloneDeep(option.series)
-                option.series[params.seriesIndex].symbol = 'circle'
+              series[params.seriesIndex].data[params.dataIndex] = {
-                option.series[params.seriesIndex].itemStyle = {
+                symbol: 'circle',
+                itemStyle: {
                   borderColor: this.hexToRgb(params.color, 0.4),
                   borderWidth: 5
-                }
+                },
-                myChart.setOption(option)
+                value: params.value
               }
+              myChart.setOption({ series })
+              myChart.dispatchAction(
+                {
+                  type: 'highlight',
+                  dataIndex: params.dataIndex
+                }
+              )
             }
             this.tooltip.activeIndex = params.seriesIndex
           })
           myChart.on('mouseout', (params) => {
             if (this.chartInfo.type !== 'point') {
               const option = myChart.getOption()
-              option.series.forEach(item => {
+              const series = this.$lodash.cloneDeep(option.series)
-                item.symbol = 'emptyCircle'
+              series.forEach(s => {
+                s.data.forEach((item, index) => {
+                  if (item.itemStyle) {
+                    s.data[index] = item.value
+                  }
+                })
               })
-              myChart.setOption(option)
+              myChart.setOption({ series })
             }
             this.tooltip.activeIndex = undefined
           })
@@ -472,7 +506,7 @@ export default {
             }
             const seriesName = nameArr.join('-')
             if (i === 0 && item.seriesName.indexOf('Previous') === -1 && type == 'left') {
-              const value = bus.computeTimezone(item.data[0] * 1000)
+              const value = bus.computeTimezone(item.value[0] * 1000)
               const tData = new Date(value)
               str += '<div class="tooltip-title" style="margin-bottom: 5px">'
               str += bus.timeFormate(tData)
@@ -484,7 +518,7 @@ export default {
             }
             if (item.seriesName.indexOf('Previous') === -1 && type == 'right') {
               if (i == 0 && (rightYAxisIndex == 0 || (arr.some(item => item.seriesName.indexOf('Previous') !== -1)))) {
-                const value = bus.computeTimezone(item.data[0] * 1000)
+                const value = bus.computeTimezone(item.value[0] * 1000)
                 const tData = new Date(value)
                 str += '<div class="tooltip-title" style="margin-bottom: 5px">'
                 str += bus.timeFormate(tData)
@@ -497,7 +531,7 @@ export default {
             }
             if (flag && item.seriesName.indexOf('Previous') !== -1) {
               flag = false
-              const value = bus.computeTimezone(item.data[0] * 1000 - self.minusTime)
+              const value = bus.computeTimezone(item.value[0] * 1000 - self.minusTime)
               const tData = new Date(value)
               str += '<div class="tooltip-title" style="margin-bottom: 5px">'
               str += bus.timeFormate(tData)
@@ -505,17 +539,17 @@ export default {
             }
             const color = self.colorList[item.seriesIndex]
             const previousItem = arr.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
-            let paramsDot = bus.countDecimals(item.data[1])
+            let paramsDot = bus.countDecimals(item.value[1])
             if (paramsDot < self.chartDot) {
               paramsDot = self.chartDot
             } else if (paramsDot > 6) {
               paramsDot = 6
             }
-            const val = formatScientificNotation(item.data[1], paramsDot)
+            const val = formatScientificNotation(item.value[1], paramsDot)
             sum += isNaN(self.numberWithEConvent(val)) ? 0 : parseFloat(self.numberWithEConvent(val))
             let previousDom = ''
             if (previousItem) {
-              const previousVal = formatScientificNotation(previousItem.data[1], paramsDot)
+              const previousVal = formatScientificNotation(previousItem.value[1], paramsDot)
               let minusVal = 0
               let operator
               if (previousVal <= val) {
@@ -694,16 +728,16 @@ export default {
         unit = lodash.get(this, 'chartInfo.param.rightYAxis.unit', 2)
       }
       // title
-      const value = bus.computeTimezone(params.data[0] * 1000)
+      const value = bus.computeTimezone(params.value[0] * 1000)
       const tData = new Date(value)
       // value
-      let paramsDot = bus.countDecimals(params.data[1])
+      let paramsDot = bus.countDecimals(params.value[1])
       if (paramsDot < this.chartDot) {
         paramsDot = this.chartDot
       } else if (paramsDot > 6) {
         paramsDot = 6
       }
-      const val = formatScientificNotation(params.data[1], paramsDot)
+      const val = formatScientificNotation(params.value[1], paramsDot)
       // 根据左右轴设置图标
       let className = 'row__color-block'
       if (params.yAxisIndex == 0) {

nezha-fronted/src/components/chart/chartMixin.js

@@ -164,6 +164,11 @@ export default {
         })
       })
       this.$emit('chartIsNoData', this.isNoData)
+      if (this.series.length == 1) {
+        series.forEach(item => {
+          item.cursor = 'default'
+        })
+      }
       return series
     },
     // 单个legend

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -268,9 +268,6 @@ export default {
         })
 
         if (this.series.length > 1) {
-          this.chart.on('mousemove', () => {
-            this.cursorDefault = false
-          })
           this.chart.on('click', this.chartClick)
           this.chart.on('mousedown', (params) => {
             if (this.tooltip.dataLinkShow) {
@@ -280,25 +277,43 @@ export default {
           })
         }
 
-        this.chart.on('mouseover', (params) => {
+        // 鼠标滑过当前symbol 改变样式
-          if (this.tooltip.activeIndex != params.seriesIndex) {
+        this.chart.on('mousemove', (params) => {
-            const option = this.chart.getOption()
+          if (this.series.length > 1) {
-            option.series[params.seriesIndex].symbol = 'circle'
+            this.chart.on('mousemove', () => {
-            option.series[params.seriesIndex].itemStyle = {
+              this.cursorDefault = false
+            })
+          }
+          const option = this.chart.getOption()
+          const series = this.$lodash.cloneDeep(option.series)
+          series[params.seriesIndex].data[params.dataIndex] = {
+            symbol: 'circle',
+            itemStyle: {
               borderColor: this.hexToRgb(params.color, 0.4),
               borderWidth: 5
-            }
+            },
-            this.chart.setOption(option)
+            value: params.value
           }
+          this.chart.setOption({ series })
+          this.chart.dispatchAction(
+            {
+              type: 'highlight',
+              dataIndex: params.dataIndex
+            }
+          )
           this.tooltip.activeIndex = params.seriesIndex
         })
-
         this.chart.on('mouseout', (params) => {
           const option = this.chart.getOption()
-          option.series.forEach(item => {
+          const series = this.$lodash.cloneDeep(option.series)
-            item.symbol = 'emptyCircle'
+          series.forEach(s => {
+            s.data.forEach((item, index) => {
+              if (item.itemStyle) {
+                s.data[index] = item.value
+              }
+            })
           })
-          this.chart.setOption(option)
+          this.chart.setOption({ series })
           this.tooltip.activeIndex = undefined
         })
       }