From 971c1ab95f42fa75b361efc7d0a3d513055466f1 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Mon, 28 Aug 2023 18:00:30 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-3083=20fix=EF=BC=9A=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/css/components/chart/chart.scss    |  4 +++
 .../chart/chart/chartTimeSeries.vue           | 26 +++++++++++++++++--
 .../src/components/chart/chart/legend.vue     |  4 +++
 .../chart/chart/options/chartTimeSeries.js    | 20 +++++++++++---
 .../src/components/chart/chartMixin.js        |  1 +
 5 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index 5a318301d..6693b38c1 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -412,6 +412,9 @@
       .nz-icon{
         color: $--background-color-1 !important;
       }
+      .nz-icon-override{
+        color: $--color-text-regular !important;
+      }
     }
   }
   .nz-icon-override{
@@ -419,6 +422,7 @@
     font-size: 15px;
     margin-left: 5px;
     vertical-align: middle;
+    color: $--color-text-regular !important;
   }
   .legend-item:hover {
     background-color: $--background-color-1;
diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
index ed87f0cc7..33d423ab5 100644
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -246,9 +246,31 @@ export default {
           }
 
           myChart.on('mouseover', (params) => {
+            if (this.chartInfo.type !== 'point') {
+              if (this.tooltip.activeIndex != params.seriesIndex) {
+                const option = myChart.getOption()
+                option.series[params.seriesIndex].symbol = 'circle'
+                option.series[params.seriesIndex].emphasis.itemStyle = {
+                  opacity: 1,
+                  borderColor: this.hexToRgb(params.color, 0.4),
+                  borderWidth: 6
+                }
+                myChart.setOption(option, true)
+              }
+            }
             this.tooltip.activeIndex = params.seriesIndex
           })
-          myChart.on('mouseout', () => {
+          myChart.on('mouseout', (params) => {
+            if (this.chartInfo.type !== 'point') {
+              const option = myChart.getOption()
+              option.series.forEach(item => {
+                item.symbol = 'emptyCircle'
+                item.emphasis.itemStyle = {
+                  opacity: 1
+                }
+              })
+              myChart.setOption(option, true)
+            }
             this.tooltip.activeIndex = undefined
           })
 
@@ -509,7 +531,7 @@ export default {
 
             // 鼠标悬浮 series data symbol 时，tooltip 中相应的legend 高亮显示
             str += `
-            <div class="${(self.tooltip.activeIndex == item.seriesIndex && self.isGrey.filter(value => value === false).length > 1) ? 'tooltip__row highlight' : 'tooltip__row'}">
+            <div class="${(self.tooltip.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>
diff --git a/nezha-fronted/src/components/chart/chart/legend.vue b/nezha-fronted/src/components/chart/chart/legend.vue
index 2d811b924..59ae84482 100644
--- a/nezha-fronted/src/components/chart/chart/legend.vue
+++ b/nezha-fronted/src/components/chart/chart/legend.vue
@@ -246,6 +246,10 @@ export default {
       }
     },
     hoverLegend (legendName, index, type) {
+      // legend 已经取消显示，鼠标悬浮，不开启 高亮效果
+      if (this.isGrey[index]) {
+        return false
+      }
       if (this.isTimeSeries) {
         getChart(this.chartId) && getChart(this.chartId).dispatchAction({
           type: type,
diff --git a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
index 9145789d4..13eb34bbf 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
@@ -91,6 +91,9 @@ export const chartTimeSeriesLineOption = {
     },
     axisTick: {
       show: false
+    },
+    axisPointer: {
+      snap: true
     }
   },
   yAxis: [
@@ -149,16 +152,27 @@ export const chartTimeSeriesLineOption = {
     type: 'line',
     symbol: 'emptyCircle', // 去掉点
     connectNulls: true,
-    symbolSize: [2, 2],
+    symbolSize: [6, 6],
     smooth: 0.2, // 曲线变平滑
-    showSymbol: false,
+    // showSymbol: false,
+    itemStyle: {
+      opacity: 0
+    },
     data: [],
     lineStyle: {
       width: 1,
       opacity: 0.9
     },
     emphasis: {
-      focus: 'series'
+      focus: 'series',
+      itemStyle: {
+        opacity: 1
+      }
+    },
+    blur: {
+      lineStyle: {
+        opacity: 0.3
+      }
     }
   }],
   useUTC: false // 使用本地时间
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index 23d9faa84..544bc6508 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -114,6 +114,7 @@ export default {
             }
             if (chartInfo.param.enable && chartInfo.param.enable.thresholds && !lodash.isEmpty(chartInfo.param.thresholds) && chartInfo.param.thresholds.length) { // 阈值
               s.markLine = {
+                silent: true,
                 symbol: 'circle',
                 symbolSize: 5
               }