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"/>