diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index e3094f8fd..231e3301d 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -507,6 +507,7 @@
     font-weight: bold;
   }
 }
+
 .endpoint-query-metrics.chart-fullscreen.nz-dialog,.recordRules-query-metrics.chart-fullscreen.nz-dialog {
   .chart-screen-header .chart-header__tools #browser-go {
     margin-left: 5px;
@@ -683,8 +684,8 @@
 }
 
 .chart-dataLink-tooltip{
-  position: absolute;
-  padding-bottom: 2px;
+  position: absolute !important;
+  padding-bottom: 2px !important;
   z-index: 999999999;
   pointer-events: auto;
   .chart-dataLink-list{
@@ -717,6 +718,23 @@
   }
 }
 
+.chart-expolre-tooltip{
+  display: block;
+  border-style: solid;
+  white-space: nowrap;
+  will-change: transform;
+  box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
+  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
+  background-color: $--background-color-empty;
+  border-width: 1px;
+  border-radius: 4px;
+  color: rgb(0, 0, 0);
+  font: 14px / 21px "Microsoft YaHei";
+  padding: 10px;
+  border-color: rgb(221, 228, 237);
+  color: $--color-text-regular !important;
+}
+
 .graph-icon-info-box{
   position: absolute;
   top: 50%;
@@ -854,4 +872,4 @@
   .chart-canvas-tooltip{
     height: auto !important;
   }
-}
\ No newline at end of file
+}
diff --git a/nezha-fronted/src/assets/css/components/cli/webSSHNew.scss b/nezha-fronted/src/assets/css/components/cli/webSSHNew.scss
index d7ac7d739..a0d798bcc 100644
--- a/nezha-fronted/src/assets/css/components/cli/webSSHNew.scss
+++ b/nezha-fronted/src/assets/css/components/cli/webSSHNew.scss
@@ -312,8 +312,31 @@
   .terminal-menu {
     position: fixed;
     width: 150px;
-    border-radius: 2px;
+    border-radius: 4px;
     z-index: 1000;
+    padding: 10px 15px;
+    .nz-icon {
+      margin-right: 5px;
+    }
+    .terminal-menu-item-disabled {
+      //background: $--background-color-disabled;
+      cursor: not-allowed !important;
+      color: $--color-text-disabled;
+    }
+  }
+}
+.terminal-setting {
+  .system-title {
+    background: $--background-color-base;
+    padding: 7px 10px !important;
+    box-sizing: border-box;
+    border-radius: 2px;
+  }
+  .el-form-item__tip {
+    margin: 8px 0 15px 0;
+  }
+  .terminal-setting-item {
+    margin-bottom: 40px;
   }
 }
 
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
index 4cedeff72..0352a8215 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
@@ -283,6 +283,7 @@
   .chart-room {
     width: 100%;
     height: 300px;
+    position: relative;
   }
   .introduce-view {
     .info-room {
diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
index 7b74b1603..7e8448734 100644
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -179,6 +179,18 @@ export default {
       this.legends = []
       this.series = chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
 
+      const styleOption = this.$lodash.get(this.chartInfo, 'param.option')
+      if (styleOption) {
+        chartOption.series.forEach(item => {
+          if (item.lineStyle && styleOption.lineWidth != undefined) {
+            item.lineStyle.width = styleOption.lineWidth
+          }
+          if (styleOption.pointSize != undefined) {
+            item.symbolSize = styleOption.pointSize
+          }
+        })
+      }
+
       this.isGrey = this.legends.map(() => false)
       chartOption.color = this.colorList
       if (!this.series.length) {
@@ -265,12 +277,11 @@ export default {
               if (this.tooltip.activeIndex != params.seriesIndex) {
                 const option = myChart.getOption()
                 option.series[params.seriesIndex].symbol = 'circle'
-                option.series[params.seriesIndex].emphasis.itemStyle = {
-                  opacity: 1,
+                option.series[params.seriesIndex].itemStyle = {
                   borderColor: this.hexToRgb(params.color, 0.4),
-                  borderWidth: 6
+                  borderWidth: 5
                 }
-                myChart.setOption(option, true)
+                myChart.setOption(option)
               }
             }
             this.tooltip.activeIndex = params.seriesIndex
@@ -280,11 +291,8 @@ export default {
               const option = myChart.getOption()
               option.series.forEach(item => {
                 item.symbol = 'emptyCircle'
-                item.emphasis.itemStyle = {
-                  opacity: 1
-                }
               })
-              myChart.setOption(option, true)
+              myChart.setOption(option)
             }
             this.tooltip.activeIndex = undefined
           })
diff --git a/nezha-fronted/src/components/chart/chart/legend.vue b/nezha-fronted/src/components/chart/chart/legend.vue
index 0c9ffcea4..6968fee1c 100644
--- a/nezha-fronted/src/components/chart/chart/legend.vue
+++ b/nezha-fronted/src/components/chart/chart/legend.vue
@@ -129,11 +129,6 @@ export default {
     }
   },
   methods: {
-    onCopy (txt) {
-      this.$copyText(txt).then(() => {
-        this.$message.success({ message: this.$t('overall.copySuccess') })
-      })
-    },
     clickLegend (legendName, index) {
       /* 点击legend
           * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
diff --git a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
index c10ebc33b..65b859d54 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
@@ -152,26 +152,23 @@ export const chartTimeSeriesLineOption = {
     type: 'line',
     symbol: 'emptyCircle', // 去掉点
     connectNulls: true,
-    symbolSize: [6, 6],
+    symbolSize: 6,
     smooth: 0.2, // 曲线变平滑
-    // showSymbol: false,
-    itemStyle: {
-      opacity: 0.001
-    },
+    showSymbol: false,
     data: [],
     lineStyle: {
       width: 1,
       opacity: 0.9
     },
     emphasis: {
-      focus: 'series',
-      itemStyle: {
-        opacity: 1
-      }
+      focus: 'series'
     },
     blur: {
       lineStyle: {
         opacity: 0.3
+      },
+      itemStyle: {
+        opacity: 1
       }
     }
   }],
diff --git a/nezha-fronted/src/components/chart/renderChart.js b/nezha-fronted/src/components/chart/renderChart.js
index f529d70c9..3dc1bbe41 100644
--- a/nezha-fronted/src/components/chart/renderChart.js
+++ b/nezha-fronted/src/components/chart/renderChart.js
@@ -45,7 +45,7 @@ export default {
       if (!leftInfo.copies) {
         chartOption.yAxis[0].min = 0
         chartOption.yAxis[0].max = 1
-      } else {
+      } else if (!chartOption.yAxis[0].max) {
         chartOption.yAxis[0].max = undefined
       }
       if (leftInfo.unit.type == 'Time' || chartOption.yAxis[0].maxInterval === 1) {
@@ -79,7 +79,7 @@ export default {
         if (!rightInfo.copies) {
           chartOption.yAxis[1].min = 0
           chartOption.yAxis[1].max = 1
-        } else {
+        } else if (!chartOption.yAxis[1].max) {
           chartOption.yAxis[1].max = undefined
         }
         if (rightInfo.unit.type == 'Time' || chartOption.yAxis[1].maxInterval === 1) {
@@ -92,6 +92,7 @@ export default {
           delete chartOption.yAxis[1].max
         }
       }
+      console.log(chartOption)
       return chartOption
     },
     getMinMaxFromData (originalDatas, chartUnit = 2, params) {
diff --git a/nezha-fronted/src/components/cli/consoleNew.vue b/nezha-fronted/src/components/cli/consoleNew.vue
index 1c536163f..c99714ee1 100644
--- a/nezha-fronted/src/components/cli/consoleNew.vue
+++ b/nezha-fronted/src/components/cli/consoleNew.vue
@@ -10,21 +10,21 @@
            top: menuPosition.top + 'px'
         }"
       >
-        <div>
-          <span @click="copySelection()">{{$t('overall.duplicate')}}</span>
+        <div class="terminal-menu-item">
+          <span @click="copySelection()"><i class="nz-icon nz-icon-override"/>{{$t('overall.duplicate')}}</span>
         </div>
-        <div v-if="showPaste">
-          <span @click="paste()">{{$t('project.topology.paste')}}</span>
+        <div class="terminal-menu-item" :class="showPaste ? '': 'terminal-menu-item-disabled'">
+          <span @click="paste()"> <i class="nz-icon nz-icon-putongwenjianlianjie"/> {{$t('project.topology.paste')}}</span>
         </div>
-        <div>
-          <span @click="clearTerminal()">{{$t('terminal.clear')}}</span>
+        <div class="terminal-menu-item">
+          <span @click="clearTerminal()"> <i class="nz-icon nz-icon-Clear"/> {{$t('terminal.clear')}}</span>
         </div>
         <div class="line"></div>
-        <div>
-          <span @click="showFileDir(true)">{{$t('terminal.sftp')}}</span>
+        <div class="terminal-menu-item">
+          <span @click="showFileDir(true)"> <i class="nz-icon nz-icon-SFTP"/> {{$t('terminal.sftp')}}</span>
         </div>
-        <div>
-          <span @click="closeTerminal(true)"> {{$t('overall.close')}}</span>
+        <div class="terminal-menu-item">
+          <span @click="closeTerminal(true)"><i class="nz-icon nz-icon-guanbi2"/> {{$t('overall.close')}}</span>
         </div>
       </div>
     </div>
@@ -400,6 +400,9 @@ export default {
       }
     },
     async paste () {
+      if (!this.showPaste) {
+        return
+      }
       if (!document.execCommand('paste')) {
         const text = await navigator.clipboard.readText()
         this.term.write(text)
diff --git a/nezha-fronted/src/components/cli/terminal.vue b/nezha-fronted/src/components/cli/terminal.vue
index 2cfe537a0..2b490905e 100644
--- a/nezha-fronted/src/components/cli/terminal.vue
+++ b/nezha-fronted/src/components/cli/terminal.vue
@@ -10,10 +10,10 @@
         <div class="personal" id="personal">
           <el-dropdown trigger="click">
             <div class="personal-avatar"><span>{{name ? name.substr(0, 1) : ''}}</span>&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></div>
-            <el-dropdown-menu  slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top" style="width: 142px; line-height: 36px;">
+            <el-dropdown-menu  slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top" style="width: 210px; line-height: 36px;">
               <div class="personal-dropdown">
                 <div class="personal-dropdown__username" :title="name">{{name}}</div>
-                <div class="personal-dropdown__name" :title="name">@{{name}}</div>
+                <div class="personal-dropdown__name" style="height: auto;line-height: 1" :title="name">@{{name}}</div>
               </div>
               <el-dropdown-item>
                 <div id="header-to-personalization" @click="showPersonalization"><i class="nz-icon nz-icon-personalization"></i>{{$t('terminal.personal')}}</div>
@@ -52,54 +52,54 @@
       </transition>
     </div>
     <!--弹窗-->
-    <el-dialog :modal-append-to-body='false' :z-index="1000" :show-close="true" :visible.sync="personalization" @close="personalization = false" class="nz-dialog webshell-selectAsset" width="650px">
+    <el-dialog :modal-append-to-body='false' :z-index="1000" :show-close="true" :visible.sync="personalization" @close="personalization = false" class="nz-dialog terminal-setting webshell-selectAsset" width="650px">
       <div slot="title">{{$t('terminal.personal')}}</div>
       <div>
         <el-form v-model="newTerminalSetting" label-width="180px" size="small" ref="terminalForm"  :validate-on-rule-change="false">
-          <div class="system-title" style="padding-top: 15px">{{$t('terminal.render')}}</div>
-          <el-form-item :label="$t('terminal.waterMaker')" prop="watermark">
+          <div class="system-title" style="margin-top: 5px">{{$t('terminal.render')}}</div>
+          <el-form-item :label="$t('terminal.waterMaker')" class="terminal-setting-item" prop="watermark">
             <el-switch v-model="newTerminalSetting.watermark" :active-value='true' :inactive-value='false' id="terminal-setting-watermark_change" size="small">
             </el-switch>
-            <div class="el-form-item__tip" style="margin: 0">{{$t('terminal.waterMakerInfo')}}</div>
+            <div class="el-form-item__tip">{{$t('terminal.waterMakerInfo')}}</div>
           </el-form-item>
-          <el-form-item :label="$t('terminal.scrollbackLines')" prop="scrollbackLines">
+          <el-form-item :label="$t('terminal.scrollbackLines')" class="terminal-setting-item" prop="scrollbackLines">
             <el-input-number :min="1" :precision="0" :controls="false" :placeholder="'默认25000'" v-model="newTerminalSetting.scrollbackLines" size="small">
             </el-input-number>
-            <div class="el-form-item__tip" style="margin: 0">{{$t('terminal.scrollbackLinesInfo')}}</div>
+            <div class="el-form-item__tip">{{$t('terminal.scrollbackLinesInfo')}}</div>
           </el-form-item>
-          <div class="system-title system-title-border" style="width: 100%;margin-top: 50px">{{$t('terminal.mouse')}}</div>
-          <el-form-item :label="$t('terminal.rightClick')" prop="rightClick">
+          <div class="system-title system-title-border" style="width: 100%;">{{$t('terminal.mouse')}}</div>
+          <el-form-item :label="$t('terminal.rightClick')" class="terminal-setting-item" prop="rightClick">
             <el-radio-group  v-model="newTerminalSetting.rightClick" size="small">
               <el-radio-button label="none">{{$t('project.topology.none')}}</el-radio-button>
               <el-radio-button label="menu">{{$t('terminal.menu')}}</el-radio-button>
               <el-radio-button label="paste">{{$t('terminal.paste')}}</el-radio-button>
             </el-radio-group>
-            <div class="el-form-item__tip" style="margin: 0">{{$t('terminal.rightClickInfo')}}</div>
+            <div class="el-form-item__tip">{{$t('terminal.rightClickInfo')}}</div>
           </el-form-item>
-          <el-form-item :label="$t('terminal.wordSeparator')" prop="wordSeparator">
+          <el-form-item :label="$t('terminal.wordSeparator')" class="terminal-setting-item" prop="wordSeparator">
             <el-input size="small" v-model="newTerminalSetting.wordSeparator">
             </el-input>
-            <div class="el-form-item__tip" style="margin: 0">{{$t('terminal.wordSeparatorInfo')}}</div>
+            <div class="el-form-item__tip">{{$t('terminal.wordSeparatorInfo')}}</div>
           </el-form-item>
-          <div class="system-title system-title-border" style="width: 100%;margin-top: 50px">{{$t('terminal.clipboard')}}</div>
+          <div class="system-title system-title-border" style="width: 100%;">{{$t('terminal.clipboard')}}</div>
           <el-form-item :label="$t('terminal.copySelect')" prop="copyOnSelect">
             <el-switch v-model="newTerminalSetting.copyOnSelect" :active-value='true' :inactive-value='false' id="terminal-setting-watermark_change">
             </el-switch>
-<!--            <div class="el-form-item__tip" style="margin: 0">{{$t('config.system.basic.pinPolicyValue')}}</div>-->
+<!--            <div class="el-form-item__tip">{{$t('config.system.basic.pinPolicyValue')}}</div>-->
           </el-form-item>
           <el-form-item :label="$t('terminal.copyFormatting')" prop="copyWithFormatting">
             <el-switch v-model="newTerminalSetting.copyWithFormatting" :active-value='true' :inactive-value='false' id="terminal-setting-watermark_change">
             </el-switch>
-<!--            <div class="el-form-item__tip" style="margin: 0">{{$t('terminal.copyFormattingInfo')}}</div>-->
+<!--            <div class="el-form-item__tip">{{$t('terminal.copyFormattingInfo')}}</div>-->
           </el-form-item>
           <el-form-item :label="$t('terminal.copyTrimEnd')" prop="copyTrimEnd">
             <el-switch v-model="newTerminalSetting.copyTrimEnd" :active-value='true' :inactive-value='false' id="terminal-setting-watermark_change">
             </el-switch>
-            <div class="el-form-item__tip" style="margin: 0">{{$t('terminal.copyTrimEndInfo')}}</div>
+            <div class="el-form-item__tip">{{$t('terminal.copyTrimEndInfo')}}</div>
           </el-form-item>
         </el-form>
       </div>
-      <div slot="footer">
+      <div slot="footer" style="padding-bottom: 10px">
         <button class="footer__btn footer__btn--light" @click="personalization = false">
           <span>{{$t('overall.cancel')}}</span>
         </button>
diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
index d2093dc63..e7b444644 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
@@ -5,9 +5,9 @@
         <div v-if="item.key === 'detail' && activeName === 'detail'">
           <alert-message-info-detail :info-data="infoData"/>
         </div>
-        <div v-else-if="item.key === 'dashboard' && activeName === 'dashboard'" class="alert-message-info-dashboard">
-          <dashboard :temp-id="infoData.alertRule.dashboardId" :showImport="false" :showName="false" :url-type="'dashboard'" :time="timeRange" class="message-info-dashboard" :from="fromRoute.dashboard"></dashboard>
-        </div>
+<!--        <div v-else-if="item.key === 'dashboard' && activeName === 'dashboard'" class="alert-message-info-dashboard">-->
+<!--          <dashboard :temp-id="infoData.alertRule.dashboardId" :showImport="false" :showName="false" :url-type="'dashboard'" :time="timeRange" class="message-info-dashboard" :from="fromRoute.dashboard"></dashboard>-->
+<!--        </div>-->
         <div v-else-if="(activeName === item.key) && infoData[item.key]" class="no-position-alert-label">
 <!--          <searchItemInfo :obj="findData(item.key)" :severityData="severityData" :fa-loading="false"></searchItemInfo>-->
           <alertLabel
@@ -118,13 +118,13 @@ export default {
           })
           // && n.alertRule.dashboardId
           // n.alertRule && (n.alertRule.dashboardId = 101534)
-          if (n.alertRule && n.alertRule.dashboardId && n.alertRule.dashboardId != -1) {
-            //
-            this.cardNames.push({
-              key: 'dashboard',
-              label: this.$t('overall.dashboard')
-            })
-          }
+          // if (n.alertRule && n.alertRule.dashboardId && n.alertRule.dashboardId != -1) {
+          //   //
+          //   this.cardNames.push({
+          //     key: 'dashboard',
+          //     label: this.$t('overall.dashboard')
+          //   })
+          // }
           if (n.alertRule && n.alertRule.trbShot && n.alertRule.trbShot != '<div  class="editor-core ql-container ql-snow"><div class="ql-editor"><p><br></p></div></div>') {
             this.cardNames.push({
               key: 'trbShot',
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
index a492deb62..57dfec4d4 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
@@ -255,6 +255,10 @@ export default {
           tooltip: {
             mode: 'all',
             sort: 'none'
+          },
+          option: {
+            lineWidth: 1,
+            pointSize: 6
           }
         },
         elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
@@ -464,6 +468,12 @@ export default {
             }
             this.chart.param.enable.tooltip = true
           }
+          if (!this.chart.param.option) {
+            this.chart.param.option = {
+              lineWidth: 1,
+              pointSize: 6
+            }
+          }
         }
         if (this.chart.type === 'stat') {
           if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
@@ -523,6 +533,12 @@ export default {
                 }
                 this.chart.param.enable.tooltip = true
               }
+              if (!this.chart.param.option) {
+                this.chart.param.option = {
+                  lineWidth: 1,
+                  pointSize: 6
+                }
+              }
             }
             if (this.chart.type === 'stat') {
               if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
@@ -629,7 +645,7 @@ export default {
       if (this.$refs.pickTime) {
         const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
         this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-        this.setSearchTime('searchTime',nowTimeType, this.storeDispatchPanelTime)
+        this.setSearchTime('searchTime', nowTimeType, this.storeDispatchPanelTime)
         this.filter.dashboardId = this.showPanel.id
         this.getData(this.filter)
         this.$store.dispatch('dispatchPanelTime', {
@@ -896,7 +912,7 @@ export default {
         this.nowTimeType = this.$lodash.cloneDeep(nowTimeType)
         // 刷新时间范围
         this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType)
-        this.setSearchTime('searchTime',this.nowTimeType, this.storeDispatchPanelTime)
+        this.setSearchTime('searchTime', this.nowTimeType, this.storeDispatchPanelTime)
         this.$store.dispatch('dispatchPanelTime', {
           time: this.searchTime,
           nowTimeType: this.nowTimeType
@@ -915,7 +931,7 @@ export default {
         const nowTimeType = this.nowTimeType = this.timePickerRange.nowTimeType
         this.searchTime = this.timePickerRange.time
         this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.setTimeRange(this.nowTimeType, this.searchTime)
-        this.setSearchTime('searchTime',nowTimeType, this.storeDispatchPanelTime)
+        this.setSearchTime('searchTime', nowTimeType, this.storeDispatchPanelTime)
       })
     },
     // 设置默认刷新
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index bc8c42186..9962d63d3 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -339,27 +339,27 @@
             </el-time-picker>
           </el-form-item>
           <div class="alert-rule-split-title">{{ $t('overall.more') }}</div>
-          <!--panel-->
-          <el-form-item
-            class="form-item--half-width"
-            :label="$t('overall.associateDashboard')"
-            prop="dashboard"
-          >
-            <select-panel @setPanelName="setPanelName" ref="selectPanel" :disabled="false" :filter-panel="filterPanel" :chart-box="true" :panel-lock="true" :show-panel="showPanel" :panelData="panelData" :placement="'bottom-start'" @selectPanel="selectPanel">
-              <template v-slot:header>
-                <div class="panel-select-header">
-                  <el-input id="chart-box-panelname" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="width: 596px"></el-input>
-                </div>
-              </template>
-              <template v-slot:trigger>
-<!--                <el-input placeholder="" size="small" clearable v-model="panelName" :disabled="false"></el-input>-->
-                <div class="alert-rule-box-dashboard">
-                  <div class="text-ellipsis alert-rule-box-dashboard-name" :title="panelName">{{panelName}}</div>
-                  <i class="nz-icon nz-icon-guanbi2" @click.stop="clearDashboard()"/>
-                </div>
-              </template>
-            </select-panel>
-          </el-form-item>
+<!--          &lt;!&ndash;panel&ndash;&gt;-->
+<!--          <el-form-item-->
+<!--            class="form-item&#45;&#45;half-width"-->
+<!--            :label="$t('overall.associateDashboard')"-->
+<!--            prop="dashboard"-->
+<!--          >-->
+<!--            <select-panel @setPanelName="setPanelName" ref="selectPanel" :disabled="false" :filter-panel="filterPanel" :chart-box="true" :panel-lock="true" :show-panel="showPanel" :panelData="panelData" :placement="'bottom-start'" @selectPanel="selectPanel">-->
+<!--              <template v-slot:header>-->
+<!--                <div class="panel-select-header">-->
+<!--                  <el-input id="chart-box-panelname" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="width: 596px"></el-input>-->
+<!--                </div>-->
+<!--              </template>-->
+<!--              <template v-slot:trigger>-->
+<!--&lt;!&ndash;                <el-input placeholder="" size="small" clearable v-model="panelName" :disabled="false"></el-input>&ndash;&gt;-->
+<!--                <div class="alert-rule-box-dashboard">-->
+<!--                  <div class="text-ellipsis alert-rule-box-dashboard-name" :title="panelName">{{panelName}}</div>-->
+<!--                  <i class="nz-icon nz-icon-guanbi2" @click.stop="clearDashboard()"/>-->
+<!--                </div>-->
+<!--              </template>-->
+<!--            </select-panel>-->
+<!--          </el-form-item>-->
           <el-form-item :label="$t('alert.config.trbShot')" prop="trbShot">
             <rich-text-editor ref="richTextEditor" :edit-data="editAlertRule.trbShot" @after-init="afterInitRich"></rich-text-editor>
           </el-form-item>
@@ -804,7 +804,7 @@ export default {
   mounted () {
     this.getUserList()
     this.getNotifyData()
-    this.getDashboard()
+    // this.getDashboard()
   },
   watch: {
     alertRule: {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index baecb8939..c4f3857c5 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -447,6 +447,44 @@
         </el-form-item>
       </div>
 
+      <!-- option  -->
+      <div v-if="isTimeSeries(chartConfig.type)">
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.dashboard.chartForm.option')}}</span>
+        </div>
+        <div
+          class="form-items--half-width-group"
+        >
+          <!--lineWidth-->
+          <el-form-item
+            v-if="chartConfig.type!=='point'"
+            :label="$t('dashboard.dashboard.chartForm.lineWidth')"
+            class="form-item--half-width"
+            prop="param.option.lineWidth"
+            >
+            <el-input-number
+              size="small"
+              :controls="false"
+              @change="change"
+              show-word-limit
+              v-model="chartConfig.param.option.lineWidth"/>
+          </el-form-item>
+          <!--pointSize-->
+          <el-form-item
+            :label="$t('dashboard.dashboard.chartForm.pointSize')"
+            class="form-item--half-width"
+            prop="param.option.pointSize"
+            >
+            <el-input-number
+              size="small"
+              :controls="false"
+              @change="change"
+              show-word-limit
+              v-model="chartConfig.param.option.pointSize"/>
+          </el-form-item>
+        </div>
+      </div>
+
       <!-- Right Y Axis   -->
       <div v-if="isTimeSeries(chartConfig.type)">
         <div class="form__sub-title">
@@ -1458,6 +1496,10 @@ export default {
             tooltip: {
               mode: 'all',
               sort: 'none'
+            },
+            option: {
+              lineWidth: 1,
+              pointSize: 6
             }
           }
           this.$nextTick(() => {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 695dff2b2..c0d63e4c1 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -400,11 +400,6 @@ export default {
               varValue: '',
               result: 'show'
             },
-            dataLink: [],
-            tooltip: {
-              mode: 'all',
-              sort: 'none'
-            },
             rightYAxis: {
               elementNames: [],
               style: 'line',
@@ -412,6 +407,15 @@ export default {
               label: '',
               min: undefined,
               max: undefined
+            },
+            dataLink: [],
+            tooltip: {
+              mode: 'all',
+              sort: 'none'
+            },
+            option: {
+              lineWidth: 1,
+              pointSize: 6
             }
           }
         }
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index cbc0fe3ed..e3467ef0a 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -183,6 +183,7 @@ export default {
               localStorage.setItem('nz-language', lang)
               this.$store.commit('setLanguage', lang)
               this.$i18n.locale = lang
+              this.$message.success(this.$t('tip.saveSuccess'))
               setTimeout(() => {
                 window.location.reload()
               }, 800)
diff --git a/nezha-fronted/src/components/page/dashboard/dashboard.vue b/nezha-fronted/src/components/page/dashboard/dashboard.vue
index d46910692..85b45a170 100644
--- a/nezha-fronted/src/components/page/dashboard/dashboard.vue
+++ b/nezha-fronted/src/components/page/dashboard/dashboard.vue
@@ -271,6 +271,10 @@ export default {
           tooltip: {
             mode: 'all',
             sort: 'none'
+          },
+          option: {
+            lineWidth: 1,
+            pointSize: 6
           }
         },
         elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
@@ -638,6 +642,12 @@ export default {
             }
             this.chart.param.enable.tooltip = true
           }
+          if (!this.chart.param.option) {
+            this.chart.param.option = {
+              lineWidth: 1,
+              pointSize: 6
+            }
+          }
         }
         if (this.chart.type === 'stat') {
           if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
@@ -697,6 +707,12 @@ export default {
                 }
                 this.chart.param.enable.tooltip = true
               }
+              if (!this.chart.param.option) {
+                this.chart.param.option = {
+                  lineWidth: 1,
+                  pointSize: 6
+                }
+              }
             }
             if (this.chart.type === 'stat') {
               if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
@@ -1247,7 +1263,7 @@ export default {
     this.$store.commit('setMode', this.mode)
     await this.getTableData()
     if (this.nowTimeType.type) {
-      this.setSearchTime('searchTime',this.nowTimeType)
+      this.setSearchTime('searchTime', this.nowTimeType)
     }
     if (this.nowTimeType) {
       this.nowTimeType.start_time = this.searchTime[0]
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index 1dfcf3b1a..140008e0d 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -3845,9 +3845,10 @@ export default {
             }
             data.forEach((result, i) => {
               const seriesItem = {
+                type: 'line',
                 name: '',
                 symbol: 'emptyCircle', // 去掉点
-                symbolSize: [2, 2],
+                symbolSize: [6, 6],
                 showSymbol: false,
                 smooth: 0.2, // 曲线变平滑
                 data: [],
@@ -3855,7 +3856,17 @@ export default {
                   width: 1,
                   opacity: 0.9
                 },
-                type: 'line'
+                emphasis: {
+                  focus: 'series'
+                },
+                blur: {
+                  lineStyle: {
+                    opacity: 0.3
+                  },
+                  itemStyle: {
+                    opacity: 1
+                  }
+                }
               }
               let legendName = ''
               seriesItem.data = result.values.map((item) => {
@@ -3927,9 +3938,10 @@ export default {
                 }
                 data.forEach((result, i) => {
                   const seriesItem = {
+                    type: 'line',
                     name: '',
                     symbol: 'emptyCircle', // 去掉点
-                    symbolSize: [2, 2],
+                    symbolSize: [6, 6],
                     showSymbol: false,
                     smooth: 0.2, // 曲线变平滑
                     data: [],
@@ -3937,7 +3949,17 @@ export default {
                       width: 1,
                       opacity: 0.9
                     },
-                    type: 'line'
+                    emphasis: {
+                      focus: 'series'
+                    },
+                    blur: {
+                      lineStyle: {
+                        opacity: 0.3
+                      },
+                      itemStyle: {
+                        opacity: 1
+                      }
+                    }
                   }
                   let legendName = ''
                   seriesItem.data = result.values.map((item) => {
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
index 5426994b5..0e014e290 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
@@ -426,9 +426,10 @@ export default {
             }
             data.forEach((result, i) => {
               const seriesItem = {
+                type: 'line',
                 name: '',
                 symbol: 'emptyCircle', // 去掉点
-                symbolSize: [2, 2],
+                symbolSize: [6, 6],
                 showSymbol: false,
                 smooth: 0.2, // 曲线变平滑
                 data: [],
@@ -436,7 +437,17 @@ export default {
                   width: 1,
                   opacity: 0.9
                 },
-                type: 'line'
+                emphasis: {
+                  focus: 'series'
+                },
+                blur: {
+                  lineStyle: {
+                    opacity: 0.3
+                  },
+                  itemStyle: {
+                    opacity: 1
+                  }
+                }
               }
               let legendName = ''
               seriesItem.data = result.values.map((item) => {
@@ -632,9 +643,10 @@ export default {
             }
             data.forEach((result, i) => {
               const seriesItem = {
+                type: 'line',
                 name: '',
                 symbol: 'emptyCircle', // 去掉点
-                symbolSize: [2, 2],
+                symbolSize: [6, 6],
                 showSymbol: false,
                 smooth: 0.2, // 曲线变平滑
                 data: [],
@@ -642,7 +654,17 @@ export default {
                   width: 1,
                   opacity: 0.9
                 },
-                type: 'line'
+                emphasis: {
+                  focus: 'series'
+                },
+                blur: {
+                  lineStyle: {
+                    opacity: 0.3
+                  },
+                  itemStyle: {
+                    opacity: 1
+                  }
+                }
               }
               let legendName = ''
               seriesItem.data = result.values.map((item) => {
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index acb67fda3..7208e3b88 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -580,7 +580,8 @@ export default {
             remote: {
               url: baseUrl + '/prom',
               fetchFn: this.fetchFn
-            }
+            },
+            maxMetricsMetadata: 99999
           }))
         }
       )
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index 1a4fc1704..f24963753 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -4,15 +4,40 @@
     <div class="showMore" v-if="legendAll.length !== legend.length"><i class="nz-icon nz-icon-jinggao"></i>{{$t("dashboard.dashboard.moreTitle")}} <span class="moreChart" @click="showMore">{{$t("dashboard.dashboard.showAll")+legendAll.length}}</span></div>
     <div class="chart-header">{{chartTitle}}</div>
 
-    <div class="chart-body" ref="chartBody" :id="chartId" ></div>
+    <div class="chart-body" ref="chartBody" :id="chartId" :class="{'chart-cursor-default':cursorDefault}"></div>
     <div class="chart-no-data" v-show="noData">No Data</div>
 
     <div class="legend-container legend-container-screen" :id="'legendArea' + chartId" ref="legendArea" v-show="legend.length>0">
-      <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':item.isGray}" :key="'legend_' + item.name+'_'+index">
-        <span class="legend-shape" :style="{background:(item.isGray?'#D3D3D3':getBgColor(index))}"></span>{{item.alias?item.alias:item.name}}
+      <div
+        v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"
+        :key="'legend_' + item.name+'_'+index"
+        class="legend-item"
+        :class="{'ft-gr':item.isGray}"
+        @click="clickLegend(item.name,index)"
+        @mouseenter="hoverLegend(item.name, index,'highlight')"
+        @mouseleave="hoverLegend(item.name, index,'downplay')"
+      >
+        <span class="legend-shape" :style="{background:(item.isGray?'#D3D3D3':getBgColor(index))}"></span>
+        <span>{{item.alias?item.alias:item.name}}</span>
+        <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias?item.alias:item.name)" :title="$t('overall.copyText')"></i>
       </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 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>
+          <span>{{$t('dashboard.showAllSeries')}}</span>
+        </div>
+        <!-- 有多条数据时显示 -->
+        <div class="chart-dataLink-item" v-else @click="showSelectedSeries">
+          <i class="nz-icon nz-icon-a-Showseletedseries"></i>
+          <span>{{$t('dashboard.showSelectedSeries')}}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -56,7 +81,21 @@ export default {
       noData: false,
       dataSize: 20,
       chartDot: 2,
-      theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
+      theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light',
+      cursorDefault: false,
+      tooltip: {
+        x: 0,
+        y: 0,
+        title: 0,
+        value: 0,
+        mapping: {},
+        show: false,
+        dataLinkShow: '',
+        metric: {},
+        activeIndex: undefined,
+        clickIndex: undefined
+      },
+      isInit: true
     }
   },
   created () {
@@ -174,6 +213,11 @@ export default {
         } else {
           this.option.yAxis.axisLabel.formatter = this.defaultYAxisFormatter
         }
+        if (this.series.length == 1) {
+          this.series.forEach(item => {
+            item.cursor = 'default'
+          })
+        }
       }
       if (this.series && this.series.length) {
         this.$set(this.option, 'series', this.series)
@@ -207,6 +251,60 @@ export default {
           }
         })
       }
+
+      if (this.isInit) {
+        // 未设置dataLink的图表 鼠标样式为default
+        this.chart.getZr().on('mousemove', (params) => {
+          // 获取鼠标在图表中的坐标
+          const pointInPixel = [params.offsetX, params.offsetY]
+          const option = this.chart.getOption()
+          const zoomState = this.$lodash.get(option, 'toolbox[0].feature.dataZoom.iconStatus.zoom', 'normal')
+          // 判断鼠标在坐标轴中且zoom未被激活
+          if (this.chart.containPixel('grid', pointInPixel) && zoomState === 'normal') {
+            this.cursorDefault = true
+          } else {
+            this.cursorDefault = false
+          }
+        })
+
+        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) {
+              const e = params.event.event
+              e.stopPropagation()
+            }
+          })
+        }
+
+        this.chart.on('mouseover', (params) => {
+          if (this.tooltip.activeIndex != params.seriesIndex) {
+            const option = this.chart.getOption()
+            option.series[params.seriesIndex].symbol = 'circle'
+            option.series[params.seriesIndex].itemStyle = {
+              borderColor: this.hexToRgb(params.color, 0.4),
+              borderWidth: 5
+            }
+            this.chart.setOption(option)
+          }
+          this.tooltip.activeIndex = params.seriesIndex
+        })
+
+        this.chart.on('mouseout', (params) => {
+          const option = this.chart.getOption()
+          option.series.forEach(item => {
+            item.symbol = 'emptyCircle'
+          })
+          this.chart.setOption(option)
+          this.tooltip.activeIndex = undefined
+        })
+      }
+
+      this.isInit = false
+
       this.resize()
     },
     chartRoomMouseMove (event, tooltipDom) {
@@ -252,6 +350,17 @@ export default {
       const color = this.colors[index]
       return color
     },
+    hoverLegend (legendName, index, type) {
+      // legend 已经取消显示，鼠标悬浮，不开启 高亮效果
+      if (this.legend[index].isGray) {
+        return false
+      }
+      this.chart && this.chart.dispatchAction({
+        type: type,
+        seriesIndex: index,
+        name: legendName
+      })
+    },
     clickLegend (legendName, index) {
       /* 点击legend
           * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
@@ -350,35 +459,17 @@ export default {
       // 当前鼠标位置
       const pointX = point[0]
       const pointY = point[1]
-      // 外层div大小
-      /* const viewWidth = size.viewSize[0]
-        const viewHeight = size.viewSize[1] */
       // 提示框大小
       const boxWidth = size.contentSize[0]
-      // const boxHeight = size.contentSize[1]
       const chartDom = document.getElementById(this.chartId)
       if (chartDom) {
-        // const parTop = chartDom.offsetTop
-        const parLeft = chartDom.offsetLeft
-
         const parent = chartDom.parentElement
-        // const parClientHeight = parent.clientHeight// 可视高度
         const parClientWidth = parent.clientWidth// 可视宽度
-        // const parScrollTop = parent.scrollTop
-        if ((parClientWidth - pointX - parLeft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
+        if ((parClientWidth - pointX - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
           x = pointX + 10
         } else {
           x = pointX - boxWidth
         }
-        // if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
-        //   y = pointY+10;
-        // }else {
-        //   y = pointY-boxHeight;
-        // }
-        y = pointY + 10
-        return [x, y]
-      } else {
-        x = pointX - boxWidth
         y = pointY + 10
         return [x, y]
       }
@@ -422,13 +513,15 @@ export default {
     defaultTooltipFormatter: function (params) {
       let showFlag = false
       let minusFlag = true
-      let str = '<div>'
+      let str = '<div class="nz-chart__tooltip">'
       params instanceof Array || (params = [params])
       params.forEach((item, i) => {
         const alias = this.queryAlias(item.seriesIndex)
         if (i === 0 && alias.indexOf('Previous ') === -1) {
           const value = item.data[0]
+          str += '<div class="tooltip-title" style="margin-bottom: 5px">'
           str += bus.timeFormate(bus.computeTimezone(value))
+          str += '</div>'
         }
         if (alias.indexOf('Previous ') !== -1 && minusFlag) {
           if (i !== 0) {
@@ -441,9 +534,12 @@ export default {
         showFlag = showFlag || item.data[1]
         if (!isNaN(item.data[1] + '')) {
           const val = Number(item.data[1])
-          str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-          str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias || item.seriesName}:  </div>`
-          str += '<div style="padding-left: 10px;">'
+          str += `<div class="${(this.tooltip.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>
+                  </div>`
+          str += '<div class="row__value">'
           let dot = bus.countDecimals(val)
           if (dot < this.chartDot) {
             dot = this.chartDot
@@ -611,6 +707,134 @@ export default {
         unit,
         oldDot
       }
+    },
+    datalinkPosition (e) {
+      this.$nextTick(() => {
+        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const left = e.pageX - this.$refs.chartRoom.getBoundingClientRect().left
+        const top = e.pageY - this.$refs.chartRoom.getBoundingClientRect().top
+        if (box) {
+          const boxWidth = box.offsetWidth
+          const chartDom = document.getElementById(this.chartId)
+          const parent = chartDom.parentElement
+          const parClientWidth = parent.clientWidth// 可视宽度
+          if ((parClientWidth - left - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
+            this.tooltip.x = left + 10
+          } else {
+            this.tooltip.x = left - boxWidth
+          }
+          this.tooltip.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'
+      })
+      const nameArr = params.seriesName.split('-')
+      if (nameArr.length > 1) {
+        nameArr.splice(nameArr.length - 1, 1)
+      }
+      const seriesName = nameArr.join('-')
+      // title
+      const value = bus.computeTimezone(params.data[0])
+      const tData = new Date(value)
+      // value
+      let paramsDot = bus.countDecimals(params.data[1])
+      if (paramsDot < this.chartDot) {
+        paramsDot = this.chartDot
+      } else if (paramsDot > 6) {
+        paramsDot = 6
+      }
+      const val = formatScientificNotation(params.data[1], paramsDot)
+      const color = this.colors[params.seriesIndex]
+      this.tooltip.tooltipHtml = `
+        <div class="nz-chart__tooltip">
+          <div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div>
+          <div class="tooltip__row">
+            <div class="row__label" :title=">${seriesName}">
+              <span class="row__color-block" style="background-color: ${color};color: ${color}"></span>
+              <span>${seriesName}</span>
+            </div>
+            <div class="row__value">
+              <span>${chartDataFormat.getUnit(this.unit).compute(val, null, -1, paramsDot)}</span>
+            </div>
+          </div>
+        </div>
+        `
+      this.tooltip.show = true
+      this.tooltip.dataLinkShow = true
+      this.tooltip.clickIndex = params.seriesIndex
+      const e = params.event.event
+      this.datalinkPosition(e)
+    },
+    clickout () {
+      if (this.series.length > 1) {
+        this.tooltip.show = false
+        this.tooltip.dataLinkShow = false
+        const option = {
+          tooltip: {
+            extraCssText: 'z-index:1000;visibility:visible;'
+          }
+        }
+        this.chart.setOption(option)
+      }
+    },
+    showSelectedSeries () {
+      this.legend.forEach((item, index) => {
+        if (index == this.tooltip.clickIndex) {
+          this.chart.dispatchAction({
+            type: 'legendSelect',
+            name: item.name
+          })
+        } else {
+          this.chart.dispatchAction({
+            type: 'legendUnSelect',
+            name: item.name
+          })
+        }
+      })
+
+      this.legend = this.legend.map((item, index) => {
+        return {
+          ...item,
+          isGray: index !== this.tooltip.clickIndex
+        }
+      })
+      this.clickout()
+    },
+    showAllSeries () {
+      this.chart.dispatchAction({
+        type: 'legendAllSelect'
+      })
+      this.legend = this.legend.map((item, index) => {
+        return {
+          ...item,
+          isGray: false
+        }
+      })
+      this.clickout()
+    },
+    // 十六进制转为rgba
+    hexToRgb (hex, a = 1) {
+      /*
+        hex: {String}, "#333", "#AF0382"
+      */
+      hex = hex.slice(1)
+      if (hex.length == 3) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+      }
+      const r = parseInt(hex.slice(0, 2), 16)
+      const g = parseInt(hex.slice(2, 4), 16)
+      const b = parseInt(hex.slice(4, 6), 16)
+      return `rgba(${r}, ${g}, ${b}, ${a})`
     }
   },
   mounted () {
@@ -623,7 +847,7 @@ export default {
   beforeDestroy () {
     this.$refs.chartRoom.removeEventListener('mousemove', this.chartRoomMouseMove)
     if (this.chart) {
-      this.chart.clear()
+      this.chart.dispose()
     }
   }
 }