From c08ceb1966c3092eb29470d3619ae634dc665d2b Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 6 Jul 2021 16:34:10 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=20chart=20-=20line=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/chart.scss              | 13 +++++++++++++
 src/assets/css/main.scss               |  1 +
 src/components/charts/chart-options.js | 12 +++++++++---
 src/views/charts/Panel.vue             |  2 +-
 4 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/css/chart.scss

diff --git a/src/assets/css/chart.scss b/src/assets/css/chart.scss
new file mode 100644
index 00000000..e0b64e3f
--- /dev/null
+++ b/src/assets/css/chart.scss
@@ -0,0 +1,13 @@
+.nz-chart-tooltip > div > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1){
+  display: flex;
+  span {
+    float: none;
+  }
+  > span:nth-of-type(2){
+    flex: 1;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+  }
+}
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 69427a28..fffc089d 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -2,5 +2,6 @@
 @import './common';
 @import './rightBoxCommon';
 @import './tableCommon';
+@import './chart';
 @import '../stylus/index.scss';
 @import './font/iconfont.css';
diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js
index 29b41950..da2ab6ba 100644
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -14,12 +14,14 @@ const line = {
     appendToBody: true,
     trigger: 'axis',
     textStyle: {
-      width: 20,
+      width: '20px',
       overflow: 'truncate'
     },
     // formatter: () =>{
     //   return '1'
     // }
+    className: 'nz-chart-tooltip',
+    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
   },
   xAxis: {
     type: 'time'
@@ -66,12 +68,14 @@ const lineWithStatistics = {
     appendToBody: true,
     trigger: 'axis',
     textStyle: {
-      width: 20,
+      width: '20px',
       overflow: 'truncate'
     },
     // formatter: () =>{
     //   return '1'
     // }
+    className: 'nz-chart-tooltip',
+    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
   },
   xAxis: {
     type: 'time'
@@ -107,12 +111,14 @@ const lineStack = {
     appendToBody: true,
     trigger: 'axis',
     textStyle: {
-      width: 20,
+      width: '20px',
       overflow: 'truncate'
     },
     // formatter: () =>{
     //   return '1'
     // }
+    className: 'nz-chart-tooltip',
+    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
   },
   xAxis: {
     type: 'time'
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
index 070d2a8d..de997dc7 100644
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="padding: 10px 0 20px 20px;">
-    <div class="cn-panel">
+    <div class="cn-panel" id="cn-panel">
       <div class="panel__time">
         <DateTimeRange class="date-time-range" :start-time="startTime" :end-time="endTime" ref="dateTimeRange" @change="reload"/>
         <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="endTime"/>