diff --git a/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue b/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
index b01cfbc..fd07fa8 100644
--- a/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
+++ b/src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
@@ -99,6 +99,9 @@ export default {
     drawAnalysis_bar() {
       let myChart = echarts.init(document.getElementById("analysisChartBar"))
       let options = {
+        tooltip: {
+          trigger: 'item'
+        },
         grid: {
           left: '12',
           right: '0%',
@@ -158,6 +161,9 @@ export default {
     drawLeftChart() {
       let myChart = echarts.init(document.getElementById("chartLeft"))
       let options = {
+        tooltip: {
+          trigger: 'item'
+        },
         grid: {
           left: '12',
           right: '0%',
@@ -217,6 +223,9 @@ export default {
     drawRightChart() {
       let myChart = echarts.init(document.getElementById("chartRight"))
       let options = {
+        tooltip: {
+          trigger: 'item'
+        },
         graphic: [
           {
             type: "text",
diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue b/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
index 71e2261..8e24d85 100644
--- a/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
@@ -30,7 +30,10 @@ export default {
     drawChart() {
       let myLine = echarts.init(document.getElementById(`${this.layout}`))
       this.option = {
-        color:this.color,
+        color: this.color,
+        tooltip: {
+          trigger: 'axis'
+        },
         grid: {
           left: 0,
           right: 0,
diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/stackedAreaChart.vue b/src/views/abnormalAlarm/databaseMonitor/instances/stackedAreaChart.vue
index 8c85bd3..ee06129 100644
--- a/src/views/abnormalAlarm/databaseMonitor/instances/stackedAreaChart.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/stackedAreaChart.vue
@@ -58,7 +58,10 @@ export default {
         }
       })
       this.option = {
-        color:this.color,
+        color: this.color,
+        tooltip: {
+          trigger: 'axis'
+        },
         grid: {
           left: 0,
           right: 0,
diff --git a/src/views/abnormalAlarm/emailMonitor/instances/index.vue b/src/views/abnormalAlarm/emailMonitor/instances/index.vue
index 946ea15..fbe4408 100644
--- a/src/views/abnormalAlarm/emailMonitor/instances/index.vue
+++ b/src/views/abnormalAlarm/emailMonitor/instances/index.vue
@@ -120,7 +120,7 @@
           </div>
         </template>
       </BoxTitle>
-      <div class="email-footer-content" id="mail"></div>
+      <div class="email-footer-content" id="mailArea"></div>
     </div>
   </div>
 </template>
@@ -226,6 +226,7 @@ export default {
       endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
       guageStore: null,
       timeLine: null,
+      areaMailLine: null,
       xData: [],
       yData: [],
       currId: "",
@@ -284,15 +285,19 @@ export default {
       })
     },
     onEmailChange(val) {
-      this.currId = val
+      this.guageStore.clear()
+      this.emailId = val
     },
     onDateChange(val) {
-      console.log(this.getBeforeDate(val-1));
-      this.startDate = this.getBeforeDate(val-1)
+      this.areaMailLine.clear()
+      this.startDate = this.getBeforeDate(val - 1)
+      this.getEmailStatistics()
     },
     onRangeDateChange(date, dateString) {
+      this.areaMailLine.clear()
       this.startDate = dateString[0]
       this.endDate = dateString[1]
+      this.getEmailStatistics()
     },
     getEmailStatus() {
       getAction("/sysEmailLog/status",{emailId:this.currId}).then(res => {
@@ -646,9 +651,12 @@ export default {
       });
     },
     drawAreaMail() {
-      let myLine = echarts.init(document.getElementById("mail"))
-      this.option1 = {
-        color:["#0096ff"],
+      this.areaMailLine = echarts.init(document.getElementById("mailArea"))
+      let option = {
+        color: ["#0096ff"],
+        tooltip: {
+          trigger: 'axis'
+        },
         grid: {
           left: 25,
           right: 0,
@@ -725,9 +733,9 @@ export default {
           }
         ]
       };
-      myLine.setOption(this.option1)
+      this.areaMailLine.setOption(option)
       window.addEventListener("resize", function () {
-        myLine.resize();
+        this.areaMailLine.resize();
       })
     },
   },
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
index 82ef63e..2f84b04 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
@@ -209,7 +209,10 @@ export default {
     drawChart1() {
       let myLine = echarts.init(document.getElementById("chart1"))
       this.option1 = {
-        color:["#0096ff"],
+        color: ["#0096ff"],
+        tooltip: {
+          trigger: 'axis'
+        },
         grid: {
           left: 25,
           right: 0,
@@ -291,7 +294,10 @@ export default {
     drawChart2() {
       let myLine = echarts.init(document.getElementById("chart2"))
       this.option2 = {
-        color:["#f1e852"],
+        color: ["#f1e852"],
+        tooltip: {
+          trigger: 'axis'
+        },
         grid: {
           left: 25,
           right: 0,
@@ -373,6 +379,9 @@ export default {
     drawChart3() {
       let myLine = echarts.init(document.getElementById("chart3"))
       this.option3 = {
+        tooltip: {
+          trigger: 'axis'
+        },
         grid: {
           left: 25,
           right: 0,
@@ -470,7 +479,10 @@ export default {
     drawChart4() {
       let myLine = echarts.init(document.getElementById("chart4"))
       this.option4 = {
-        color:this.colorList,
+        color: this.colorList,
+        tooltip: {
+          trigger: 'axis'
+        },
         grid: {
           left: 25,
           right: 0,
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/details.vue b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
index 4847008..bc16110 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/details.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
@@ -936,6 +936,9 @@ export default {
     drawAreaCpu() {
       this.areaCpu = echarts.init(document.getElementById("areaCpu"))
       let option = {
+        tooltip: {
+          trigger: 'axis'
+        },
         grid: {
           left: '0%',
           right: '0%',
@@ -1000,6 +1003,9 @@ export default {
     drawDisk() {
       this.barDisk = echarts.init(document.getElementById("disk"))
       let option = {
+        tooltip: {
+          trigger: 'item'
+        },
         grid: {
           left: '0%',
           right: '0%',
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue b/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
index 079f1ca..323ebd5 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
@@ -45,7 +45,10 @@ export default {
         }
       })
       this.option = {
-        color:["#00ff5a","#0096ff","#ffc600"],
+        color: ["#00ff5a", "#0096ff", "#ffc600"],
+        tooltip: {
+          trigger: 'axis'
+        },
         grid: {
           left: 0,
           right: 0,
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue b/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
index b640cb4..bb281d9 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
@@ -57,24 +57,24 @@
       <div class="service-content-center">
         <a-row :gutter="20">
           <a-col :span="12">
-            <BoxTitle title="Proces CPU usage(%)">
+            <BoxTitle title="Process CPU usage(%)">
               <template slot="right">
                 <ul class="legend-list">
-                  <li v-for="(item,index) in procesCpu.legend" :key="index">
-                    <div :style="`background:${procesCpu.color[index]}`" class="li-icon"></div>
+                  <li v-for="(item,index) in processCpu.legend" :key="index">
+                    <div :style="`background:${processCpu.color[index]}`" class="li-icon"></div>
                     {{ item }}
                   </li>
                 </ul>
               </template>
             </BoxTitle>
-            <div class="service-content-center-item" id="cpu"></div>
+            <div class="service-content-center-item" id="processCpu"></div>
           </a-col>
           <a-col :span="12">
-            <BoxTitle title="Proces memory usage(%)">
+            <BoxTitle title="Process memory usage(%)">
               <template slot="right">
                 <ul class="legend-list">
-                  <li v-for="(item,index) in procesMenbry.legend" :key="index">
-                    <div :style="`background:${procesMenbry.color[index]}`" class="li-icon"></div>
+                  <li v-for="(item,index) in processMenbry.legend" :key="index">
+                    <div :style="`background:${processMenbry.color[index]}`" class="li-icon"></div>
                     {{ item }}
                   </li>
                 </ul>
@@ -190,12 +190,12 @@ export default {
         legend: ["NemuHeadless.exe","System","dwm.exe","CompatTelRunner.exe","msedge.exe"],
         color: ['#2d5cd3','#60cae8','#1ab060','#ffbf44','#e86954']
       },
-      procesCpu: {
+      processCpu: {
         content: null,
         legend: ["mysqld.exe","svchost.exe"],
         color: ['#e5ae2d','#00a8ff']
       },
-      procesMenbry: {
+      processMenbry: {
         content: null,
         legend: ["mysqld.exe","svchost.exe"],
         color: ['#9ed24d','#00a8ff']
@@ -268,7 +268,10 @@ export default {
     drawRanked() {
       this.ranked.content = echarts.init(document.getElementById("ranked"))
       let option = {
-        color:this.ranked.color,
+        color: this.ranked.color,
+        tooltip: {
+          trigger: 'item'
+        },
         grid: {
           left: 25,
           right: 0,
@@ -321,36 +324,36 @@ export default {
             type: 'bar',
             barWidth: 20,
             stack: 'Search Engine',
-            emphasis: {
-              focus: 'series'
-            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
             data: [20, 32, 71, 34, 90, 30,92]
           },
           {
             name: 'Google',
             type: 'bar',
             stack: 'Search Engine',
-            emphasis: {
-              focus: 'series'
-            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
             data: [12, 25, 46, 34, 29, 23,64]
           },
           {
             name: 'Bing',
             type: 'bar',
             stack: 'Search Engine',
-            emphasis: {
-              focus: 'series'
-            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
             data: [60, 72, 71, 74, 90, 13,43]
           },
           {
             name: 'Others',
             type: 'bar',
             stack: 'Search Engine',
-            emphasis: {
-              focus: 'series'
-            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
             data: [62, 82, 91, 84, 19, 11, 55]
           },
           {
@@ -358,9 +361,9 @@ export default {
             type: 'bar',
             barWidth: 20,
             stack: 'Search Engine',
-            emphasis: {
-              focus: 'series'
-            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
             data: [20, 32, 71, 34, 90, 30,92]
           },
         ]
@@ -371,8 +374,11 @@ export default {
       });
     },
     drawProcesCpu() {
-      this.procesCpu.content = echarts.init(document.getElementById("cpu"))
+      this.processCpu.content = echarts.init(document.getElementById("processCpu"))
       let option = {
+        tooltip: {
+          trigger: 'axis'
+        },
         grid: {
           left: 0,
           right: 0,
@@ -450,14 +456,17 @@ export default {
           }
         ]
       };
-      this.procesCpu.content.setOption(option)
+      this.processCpu.content.setOption(option)
       window.addEventListener("resize", function () {
-        this.procesCpu.content.resize();
+        this.processCpu.content.resize();
       });
     },
     drawProcesMenbry() {
-      this.procesMenbry.content = echarts.init(document.getElementById("menbry"))
+      this.processMenbry.content = echarts.init(document.getElementById("menbry"))
       let option = {
+        tooltip: {
+          trigger: 'axis'
+        },
         grid: {
           left: 0,
           right: 0,
@@ -535,9 +544,9 @@ export default {
           }
         ]
       };
-      this.procesMenbry.content.setOption(option)
+      this.processMenbry.content.setOption(option)
       window.addEventListener("resize", function () {
-        this.procesMenbry.content.resize();
+        this.processMenbry.content.resize();
       });
     },
     handlePageChange(page, pageSize) {