fix：select series悬浮框优化

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -683,10 +683,10 @@
   }
 }
 
-.chart-dataLink-tooltip{
+.chart-toolbox{
   position: absolute !important;
   padding-bottom: 2px !important;
-  z-index: 999999999;
+  z-index: 9999;
   pointer-events: auto;
   .chart-dataLink-list{
     width: calc(100% + 20px);

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

@@ -22,9 +22,9 @@
       :series="series"
       :is-fullscreen="isFullscreen"
     ></chart-legend>
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
-      <div v-html="tooltip.tooltipHtml"></div>
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div v-html="toolbox.tooltipHtml"></div>
+      <div class="chart-dataLink-list">
         <!-- 只有一条数据时显示 -->
         <div class="chart-dataLink-item" v-if="isGrey.filter(value => value === false).length==1" @click="showAllSeries">
           <i class="nz-icon nz-icon-a-Showallseries"></i>
@@ -72,14 +72,13 @@ export default {
       isStack: false,
       hasRightYAxis: false,
       chartLoading: false,
-      tooltip: {
+      toolbox: {
         x: 0,
         y: 0,
         title: 0,
         value: 0,
         mapping: {},
         show: false,
-        dataLinkShow: '',
         metric: {},
         activeIndex: undefined,
         clickIndex: undefined
@@ -248,12 +247,6 @@ export default {
         }
         if (this.isInit) {
           myChart.on('click', this.chartClick)
-          myChart.on('mousedown', (params) => {
-            if (this.tooltip.dataLinkShow) {
-              const e = params.event.event
-              e.stopPropagation()
-            }
-          })
 
           // 鼠标滑过当前symbol 改变样式
           myChart.on('mousemove', (params) => {
@@ -283,7 +276,7 @@ export default {
                 }
               )
             }
-            this.tooltip.activeIndex = params.seriesIndex
+            this.toolbox.activeIndex = params.seriesIndex
           })
           myChart.on('mouseout', (params) => {
             const option = myChart.getOption()
@@ -298,7 +291,7 @@ export default {
               })
               myChart.setOption({ series })
             }
-            this.tooltip.activeIndex = undefined
+            this.toolbox.activeIndex = undefined
           })
 
           // 修复echarts bug(dataZoom设置为inside 未按住shift 页面无法滚动)
@@ -564,7 +557,7 @@ export default {
 
             // 鼠标悬浮 series data symbol 时，tooltip 中相应的legend 高亮显示
             str += `
-            <div class="${(self.tooltip.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}">
+            <div class="${(self.toolbox.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}">
               <div class="row__label">
                 <span class="${className}" style="background-color: ${color};color: ${color}"></span>
                 <span>${seriesName}</span>
@@ -666,25 +659,25 @@ export default {
         this.hasRightYAxis = true
       }
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs['timeSeries-chart-box'].getBoundingClientRect().left
         const top = e.pageY - this.$refs['timeSeries-chart-box'].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
@@ -694,17 +687,9 @@ export default {
       if (this.isConnect !== 'none') {
         echarts.disconnect('timeSeriesGroup')
       }
-      const option = {
-        tooltip: {
-          extraCssText: 'z-index:99999999;visibility:hidden;transition:none;',
-          hideDelay: 0
-        }
-      }
-      getChart(this.chartId).setOption(option)
       getChart(this.chartId).dispatchAction({
         type: 'hideTip'
       })
-      // 生成dataLink tooltip
       const nameArr = params.seriesName.split('-')
       if (nameArr.length > 1) {
         nameArr.splice(nameArr.length - 1, 1)
@@ -737,7 +722,7 @@ export default {
         className = 'yAxis-icon nz-icon nz-icon-youzongzhou'
       }
       const color = this.colorList[params.seriesIndex]
-      this.tooltip.tooltipHtml = `
+      this.toolbox.tooltipHtml = `
         <div class="nz-chart__tooltip">
           <div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div>
           <div class="tooltip__row">
@@ -751,24 +736,16 @@ export default {
           </div>
         </div>
         `
-      this.tooltip.show = true
-      this.tooltip.dataLinkShow = true
-      this.tooltip.clickIndex = params.seriesIndex
+      this.toolbox.show = true
+      this.toolbox.clickIndex = params.seriesIndex
       const e = params.event.event
-      this.datalinkPosition(e)
+      this.toolboxPosition(e)
       if (this.isConnect !== 'none') {
         echarts.connect('timeSeriesGroup')
       }
     },
     clickout () {
-      this.tooltip.show = false
-      this.tooltip.dataLinkShow = false
-      const option = {
-        tooltip: {
-          extraCssText: 'z-index:99999999;visibility:visible;'
-        }
-      }
-      getChart(this.chartId).setOption(option)
+      this.toolbox.show = false
     },
     showSelectedSeries () {
       if (this.isConnect !== 'none') {
@@ -776,7 +753,7 @@ export default {
       }
 
       this.legends.forEach((item, index) => {
-        if (index == this.tooltip.clickIndex) {
+        if (index == this.toolbox.clickIndex) {
           getChart(this.chartId).dispatchAction({
             type: 'legendSelect',
             name: item.name
@@ -789,7 +766,7 @@ export default {
         }
       })
 
-      this.isGrey = this.isGrey.map((g, i) => i !== this.tooltip.clickIndex)
+      this.isGrey = this.isGrey.map((g, i) => i !== this.toolbox.clickIndex)
       this.$refs.legend.isGrey = this.isGrey
       if (this.isConnect !== 'none') {
         echarts.disconnect('timeSeriesGroup')

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

@@ -46,7 +46,8 @@ export const chartTimeSeriesLineOption = {
       label: {
         show: false
       }
-    }
+    },
+    hideDelay: 0
   },
   dataZoom: [
     {

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

@@ -23,9 +23,9 @@
       </div>
     </div>
 
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-expolre-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
-      <div v-html="tooltip.tooltipHtml"></div>
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+    <div :id="`chart-toolbox-${chartId}`" class="chart-expolre-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div v-html="toolbox.tooltipHtml"></div>
+      <div class="chart-dataLink-list">
         <!-- 只有一条数据时显示 -->
         <div class="chart-dataLink-item" v-if="legend.filter(value => value.isGray === false).length==1" @click="showAllSeries">
           <i class="nz-icon nz-icon-a-Showallseries"></i>
@@ -82,14 +82,13 @@ export default {
       dataSize: 20,
       chartDot: 2,
       theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light',
-      tooltip: {
+      toolbox: {
         x: 0,
         y: 0,
         title: 0,
         value: 0,
         mapping: {},
         show: false,
-        dataLinkShow: '',
         metric: {},
         activeIndex: undefined,
         clickIndex: undefined
@@ -248,12 +247,6 @@ export default {
 
       if (this.isInit) {
         this.chart.on('click', this.chartClick)
-        this.chart.on('mousedown', (params) => {
-          if (this.tooltip.dataLinkShow) {
-            const e = params.event.event
-            e.stopPropagation()
-          }
-        })
 
         // 鼠标滑过当前symbol 改变样式
         this.chart.on('mousemove', (params) => {
@@ -274,7 +267,7 @@ export default {
               dataIndex: params.dataIndex
             }
           )
-          this.tooltip.activeIndex = params.seriesIndex
+          this.toolbox.activeIndex = params.seriesIndex
         })
         this.chart.on('mouseout', (params) => {
           const option = this.chart.getOption()
@@ -287,7 +280,7 @@ export default {
             })
           })
           this.chart.setOption({ series })
-          this.tooltip.activeIndex = undefined
+          this.toolbox.activeIndex = undefined
         })
       }
 
@@ -533,7 +526,7 @@ export default {
         showFlag = showFlag || item.value[1]
         if (!isNaN(item.value[1] + '')) {
           const val = Number(item.value[1])
-          str += `<div class="${(this.tooltip.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}">`
+          str += `<div class="${(this.toolbox.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}">`
           str += `<div class="row__label">
                     <span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>
                     <span>${alias || item.seriesName}</span>
@@ -707,9 +700,9 @@ export default {
         oldDot
       }
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs.chartRoom.getBoundingClientRect().left
         const top = e.pageY - this.$refs.chartRoom.getBoundingClientRect().top
         if (box) {
@@ -718,22 +711,15 @@ export default {
           const parent = chartDom.parentElement
           const parClientWidth = parent.clientWidth// 可视宽度
           if ((parClientWidth - left - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 10
+            this.toolbox.x = left + 10
           } else {
-            this.tooltip.x = left - boxWidth
+            this.toolbox.x = left - boxWidth
           }
-          this.tooltip.y = top + 10
+          this.toolbox.y = top + 10
         }
       })
     },
     chartClick (params) {
-      const option = {
-        tooltip: {
-          extraCssText: 'z-index:1000;visibility:hidden;transition:none;',
-          hideDelay: 0
-        }
-      }
-      this.chart.setOption(option)
       this.chart.dispatchAction({
         type: 'hideTip'
       })
@@ -754,7 +740,7 @@ export default {
       }
       const val = formatScientificNotation(params.value[1], paramsDot)
       const color = this.colors[params.seriesIndex]
-      this.tooltip.tooltipHtml = `
+      this.toolbox.tooltipHtml = `
         <div class="nz-chart__tooltip">
           <div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div>
           <div class="tooltip__row">
@@ -768,25 +754,17 @@ export default {
           </div>
         </div>
         `
-      this.tooltip.show = true
-      this.tooltip.dataLinkShow = true
-      this.tooltip.clickIndex = params.seriesIndex
+      this.toolbox.show = true
+      this.toolbox.clickIndex = params.seriesIndex
       const e = params.event.event
-      this.datalinkPosition(e)
+      this.toolboxPosition(e)
     },
     clickout () {
-      this.tooltip.show = false
-      this.tooltip.dataLinkShow = false
-      const option = {
-        tooltip: {
-          extraCssText: 'z-index:1000;visibility:visible;'
-        }
-      }
-      this.chart.setOption(option)
+      this.toolbox.show = false
     },
     showSelectedSeries () {
       this.legend.forEach((item, index) => {
-        if (index == this.tooltip.clickIndex) {
+        if (index == this.toolbox.clickIndex) {
           this.chart.dispatchAction({
             type: 'legendSelect',
             name: item.name
@@ -802,7 +780,7 @@ export default {
       this.legend = this.legend.map((item, index) => {
         return {
           ...item,
-          isGray: index !== this.tooltip.clickIndex
+          isGray: index !== this.toolbox.clickIndex
         }
       })
       this.clickout()

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

@@ -76,14 +76,15 @@ const commonOption = {
   tooltip: {
     trigger: 'axis',
     confine: false,
-    extraCssText: 'z-index:1000;',
+    extraCssText: 'z-index:99999999;',
     backgroundColor: 'rgba(221,228,237,1)',
     borderColor: 'rgba(221,228,237,1)',
     textStyle: { color: '#000' },
     axisPointer: {
       snap: false,
       animation: false
-    }
+    },
+    hideDelay: 0
     // formatter:null,
     // position:null,
   },