server 服务器模块 CPU usage of diferent 数据图形渲染，接口联调

src/views/abnormalAlarm/serverMonitor/instances/cpu.vue

@@ -200,44 +200,17 @@ export default {
       option2: {},
       option3: {},
       option4: {},
-      colorList: [
-        '#c13a28',
-        '#ff8a00',
-        '#cbae7f',
-        '#c9bd2b',
-        '#81b477',
-        '#488672',
-        '#55d9d1',
-        '#49a8f0',
-        '#2859ed',
-        '#9e54ec',
-        '#7e16a3',
-        '#e6437d',
-      ],
-      legendList: [
-        'CPU0,10',
-        'CPU0,11',
-        'CPU0,8',
-        'CPU0,9',
-        'CPU0,1',
-        'CPU0,2',
-        '',
-        'CPU0,0',
-        'CPU0,5',
-        'CPU0,6',
-        'CPU0,3',
-        'CPU0,4',
-        'CPU0,7',
-      ],
-      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
       visible: false,
       modalTitle: '',
+      //CPU utilizatior
       cpuUtilization: {},
       cpuUtilization_xData: [],
       cpuUtilization_data: [],
+      // Percentage of free system space
       cpuIdleRate: {},
       cpuIdleRate_xData: [],
       cpuIdleRate_data: [],
+      // Interrupt and episodic switching
       multiLine: {
         cpuInterrupt: {},
         cpuSwitch: {},
@@ -245,6 +218,9 @@ export default {
       multiLine_xData: [],
       cpuInterrupt_data: [],
       cpuSwitch_data: [],
+      // CPU usage of diferent cores
+      cpuDiff_xData: [],
+      cpuDiff_data: [],
     }
   },
   created() {
@@ -252,11 +228,6 @@ export default {
   },
   mounted() {
     this.getServerList()
-    this.$nextTick(() => {
-      setTimeout(() => {
-        this.drawChart4()
-      }, 0)
-    })
   },
   methods: {
     getTheData() {
@@ -300,20 +271,28 @@ export default {
         this.cpuSwitch_data = this.multiLine.cpuSwitch.list.map((item) => {
           return Number(item.value.toFixed(2))
         })
+        //总CPU使用率
+        let totalCpu = []
+        data.map((item) => {
+          if (item.name.search('cpuUtilization_') != -1) {
+            totalCpu.push(item)
+          }
+        })
+        console.log(totalCpu)
+        this.cpuDiff_xData = totalCpu[0].list.map((item) => {
+          return dateFormat(new Date(item.date * 1000), 'hh:mm')
+        })
+        this.cpuDiff_data = totalCpu.map((item) => {
+          return {
+            name: item.name,
+            data: item.list.map((el) => Number(el.value.toFixed(2))),
+          }
+        })
 
-        // const list = [...this.multiLine.cpuInterrupt.list, ...this.multiLine.cpuSwitch.list]
-        // this.renderingEchart(list, 'cpuMultiLine', Area) // 中断和情境切换
-        // //总CPU使用率
-        // let totalCpu = new Array()
-        // data.map((item) => {
-        //   if (item.name.search('cpuUtilization_') != -1) {
-        //     totalCpu = [...totalCpu, ...item.list]
-        //   }
-        // })
-        // this.renderingEchart(totalCpu, 'cpulist', Line)
         this.drawChart1()
         this.drawChart2()
         this.drawChart3()
+        this.drawChart4()
       })
     },
     getBeforeHours(num) {
@@ -417,7 +396,7 @@ export default {
               if (index === 0) {
                 return '        ' + value
               }
-              if (index === this.xData.length - 1) {
+              if (index === this.cpuUtilization_xData.length - 1) {
                 return value + '        '
               }
               return value
@@ -502,7 +481,7 @@ export default {
               if (index === 0) {
                 return '        ' + value
               }
-              if (index === this.xData.length - 1) {
+              if (index === this.cpuIdleRate_xData.length - 1) {
                 return value + '        '
               }
               return value
@@ -586,7 +565,7 @@ export default {
               if (index === 0) {
                 return '        ' + value
               }
-              if (index === this.xData.length - 1) {
+              if (index === this.multiLine_xData.length - 1) {
                 return value + '        '
               }
               return value
@@ -658,9 +637,9 @@ export default {
     drawChart4() {
       let myLine = echarts.init(document.getElementById('chart4'))
       this.option4 = {
-        // color: this.colorList,
         tooltip: {
           trigger: 'axis',
+          confine: true,
         },
         grid: {
           left: 25,
@@ -686,7 +665,7 @@ export default {
             },
             padding: [0, -2, -4, 0],
           },
-          data: this.legendList, // 不需要''换行
+          // data: this.legendList, // 不需要''换行
         },
         xAxis: {
           type: 'category',
@@ -704,14 +683,14 @@ export default {
               if (index === 0) {
                 return '        ' + value
               }
-              if (index === this.xData.length - 1) {
+              if (index === this.cpuDiff_xData.length - 1) {
                 return value + '        '
               }
               return value
             },
           },
           boundaryGap: false,
-          data: this.xData,
+          data: this.cpuDiff_xData,
         },
         yAxis: {
           type: 'value',
@@ -739,81 +718,17 @@ export default {
             color: 'rgba(173, 230, 238, 1)',
           },
         },
-        series: [
+        series: [],
-          {
-            type: 'line',
-            name: 'CPU0,10',
-            symbol: 'none',
-            data: [15, 30, 24, 28, 13, 14, 20],
-          },
-          {
-            type: 'line',
-            name: 'CPU0,11',
-            symbol: 'none',
-            data: [82, 92, 91, 34, 12, 30, 20],
-          },
-          {
-            type: 'line',
-            name: 'CPU0,8',
-            symbol: 'none',
-            data: [2, 9, 11, 24, 12, 20, 25],
-          },
-          {
-            type: 'line',
-            name: 'CPU0,9',
-            symbol: 'none',
-            data: [8, 19, 32, 4, 22, 13, 50],
-          },
-          {
-            type: 'line',
-            name: 'CPU0,1',
-            symbol: 'none',
-            data: [53, 62, 71, 14, 16, 37, 24],
-          },
-          {
-            type: 'line',
-            name: 'CPU0,2',
-            symbol: 'none',
-            data: [62, 54, 49, 64, 62, 45, 29],
-          },
-          {
-            type: 'line',
-            name: 'CPU0,0',
-            symbol: 'none',
-            data: [15, 30, 24, 28, 13, 14, 20],
-          },
-          {
-            type: 'line',
-            name: 'CPU0,5',
-            symbol: 'none',
-            data: [82, 92, 91, 34, 12, 30, 20],
-          },
-          {
-            type: 'line',
-            name: 'CPU0,6',
-            symbol: 'none',
-            data: [2, 9, 11, 24, 12, 20, 25],
-          },
-          {
-            type: 'line',
-            name: 'CPU0,3',
-            symbol: 'none',
-            data: [8, 19, 32, 4, 22, 13, 50],
-          },
-          {
-            type: 'line',
-            name: 'CPU0,4',
-            symbol: 'none',
-            data: [53, 62, 71, 14, 16, 37, 24],
-          },
-          {
-            type: 'line',
-            name: 'CPU0,7',
-            symbol: 'none',
-            data: [62, 54, 49, 64, 62, 45, 29],
-          },
-        ],
       }
+      let series = this.cpuDiff_data.map((item) => {
+        return {
+          type: 'line',
+          name: item.name,
+          symbol: 'none',
+          data: item.data,
+        }
+      })
+      this.option4.series = series.splice(0, 10)
       myLine.setOption(this.option4)
       window.addEventListener('resize', function () {
         myLine.resize()
@@ -827,11 +742,22 @@ export default {
       })
     },
     handelZoom(str, option) {
-      console.log(option)
       this.modalTitle = str
       this.visible = true
       this.$nextTick(() => {
-        this.drawLine(option)
+        if (str === 'CPU usage of diferent cores') {
+          option.series = this.cpuDiff_data.map((item) => {
+            return {
+              type: 'line',
+              name: item.name,
+              symbol: 'none',
+              data: item.data,
+            }
+          })
+          this.drawLine(option)
+        } else {
+          this.drawLine(option)
+        }
       })
     },
     onCancel() {