fix：数据库监控页面曲线图

src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue

@@ -8,8 +8,9 @@
 <script>
 import * as echarts from 'echarts'
 import BoxTitle from '../../components/boxTitle.vue';
+import moment from 'moment'
 export default {
-  props: ["title", "layout", "color", "dataSource"],
+  props: ["title", "layout", "color", "dataSource", "units", "newUnits"],
   components: {
     BoxTitle,
   },
@@ -28,11 +29,26 @@ export default {
   },
   methods: {
     drawChart() {
+      let seriesData = this.dataSource.map(function(item) {
+        return [item.date, item.value];
+      })
+      seriesData.forEach(function(item) {
+          item.date = new Date(item.date * 1000); // 将时间戳转换为日期对象
+      });
+      const isCompute = this.units === 'B' || this.units === 'Kb'
       let myLine = echarts.init(document.getElementById(`${this.layout}`))
       this.option = {
         color: this.color,
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
+          title: this.title,
+          formatter: (text) => {
+            let num = text.value
+            if(isCompute){
+              num = text.value + this.newUnits
+            }
+            return { name: moment(text.date * 1000).format('HH:mm'), value: num}
+          },
         },
         grid: {
           left: 0,
@@ -42,7 +58,8 @@ export default {
           containLabel: true
         },
         xAxis: {
-          type: 'category',
+          type: 'time',
+          // type: 'category',
           axisTick: {
             show:false
           },
@@ -53,21 +70,24 @@ export default {
           },
           axisLabel: {
             color: "rgba(173, 230, 238, 1)",
-            formatter: (value,index)=>{
-              if(index === 0) {
-                return '        ' + value;
-              }
-              if(index === this.xData.length -1) {
-                return value + '        ';
-              }
-              return value
-            }
+            // formatter: (value,index)=>{
+            //   if(index === 0) {
+            //     return '        ' + value;
+            //   }
+            //   if(index === this.xData.length -1) {
+            //     return value + '        ';
+            //   }
+            //   return value
+            // }
           },
           boundaryGap: false,
-          data: this.xData
+          // data: this.xData
         },
         yAxis: {
           type: 'value',
+          title:{
+            text: isCompute ? "unit:" + this.newUnits : null,
+          },
           splitLine: {
             show: true,
             lineStyle: {
@@ -86,19 +106,20 @@ export default {
         },
         series: [
           {
+            name: 'login',
             type: 'line',
-            symbol: 'none',
+            // symbol: 'none',
             lineStyle: {
-              width: 0.8
+              width: 8
             },
-            areaStyle: {
-              opacity: 1,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: this.color[0] },
-                { offset: 1, color:  this.color[1] },
-              ])
-            },
-            data: this.dataSource
+            // areaStyle: {
+            //   opacity: 1,
+            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            //     { offset: 0, color: this.color[0] },
+            //     { offset: 1, color:  this.color[1] },
+            //   ])
+            // },   
+            data: seriesData
           }
         ]
       };