服务器资源实时监控图表

src/main/resources/static/js/callSupervision/callChartOptions.js

@@ -105,7 +105,7 @@ const labelOption = {
     align: 'left',
     verticalAlign: 'middle',
     rotate: 90,
-    formatter: '{c}  {name|{a}}',
+    formatter: '{@metric}  {name|{a}}',
     fontSize: 16,
     rich: {
         name: {}
@@ -117,26 +117,35 @@ var defaultYBarOptions = {
         textStyle: {fontSize: '14px', color: "#fff"},
         left: 'center'
     },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
     grid: {
         left: '3%',
         right: '4%',
-        bottom: '5%',
+        bottom: '15%',
         containLabel: true
     },
     legend: {
-        data: ['Forest', 'Steppe', 'Desert', 'Wetland'],
         textStyle: {
             color: "#fff",
         },
         left: 10
     },
-    xAxis: [
-        {
-            type: 'category',
-            axisTick: {show: false},
-            data: ['2012', '2013', '2014', '2015', '2016']
+    dataset: {
+        source: []
+    },
+    xAxis: {
+        type: 'category',
+        axisTick: {show: false},
+        axisLabel: {
+            interval: 0, // 显示所有刻度值
+            rotate: 270, // 可选：旋转刻度标签，以免重叠
         }
-    ],
+    },
     yAxis: [
         {
             type: 'value'
@@ -144,41 +153,24 @@ var defaultYBarOptions = {
     ],
     series: [
         {
-            name: 'Forest',
             type: 'bar',
             barGap: 0,
-            label: labelOption,
+            // label: labelOption,
             emphasis: {
                 focus: 'series'
             },
-            data: [320, 332, 301, 334, 390]
-        },
-        {
-            name: 'Steppe',
-            type: 'bar',
-            label: labelOption,
-            emphasis: {
-                focus: 'series'
-            },
-            data: [220, 182, 191, 234, 290]
         },
+    ],
+    dataZoom: [ // 数据区域缩放配置
         {
-            name: 'Desert',
-            type: 'bar',
-            label: labelOption,
-            emphasis: {
-                focus: 'series'
-            },
-            data: [150, 232, 201, 154, 190]
+            type: 'inside', // 内置型数据区域缩放
+            start: 0, // 默认开始位置百分比
+            end: 100 // 默认结束位置百分比
         },
         {
-            name: 'Wetland',
-            type: 'bar',
-            label: labelOption,
-            emphasis: {
-                focus: 'series'
-            },
-            data: [98, 77, 101, 99, 40]
+            type: 'slider', // 滑动条型数据区域缩放
+            start: 0, // 默认开始位置百分比
+            end: 100 // 默认结束位置百分比
         }
     ]
 }