特性（监控）：CPU和内存图表设置y轴为其最大值

app/Http/Controllers/Api/MonitorsController.php

@@ -87,7 +87,8 @@ class MonitorsController extends Controller
         }
         foreach ($data as $key => $value) {
             $info = json_decode($value['info'], true);
-            $res['data']['times'][] = Carbon::create($value['created_at'])->tz(config('app.timezone', 'PRC'))->isoFormat('MM-DD HH:mm');
+            $res['data']['times'][] = Carbon::create($value['created_at'])->tz(config('app.timezone',
+                'PRC'))->isoFormat('MM-DD HH:mm');
             $res['data']['uptime']['uptime'][] = round($info['uptime'], 2);
             $res['data']['cpu']['use'][] = round($info['cpu_use'], 2);
             $res['data']['memory']['mem_use'][] = round($info['mem_use'], 2);
@@ -97,6 +98,18 @@ class MonitorsController extends Controller
             $res['data']['network']['tx_now'][] = round($info['tx_now'] / 1024, 2);
             $res['data']['network']['rx_now'][] = round($info['rx_now'] / 1024, 2);
         }
+        // 插入总内存大小
+        $result = explode("\n", shell_exec('free -m'));
+        foreach ($result as $key => $val) {
+            if (str_contains($val, 'Mem')) {
+                $mem_list = preg_replace("/\s+/", " ", $val);
+                break;
+            }
+        }
+        $mem_arr = explode(' ', $mem_list);
+        // 内存大小MB
+        $mem_total = $mem_arr[1];
+        $res['data']['mem_total'] = round($mem_total, 2);
         return response()->json($res);
     }
 }

resources/views/monitor.blade.php

@@ -228,6 +228,8 @@
                     markLine: {
                         data: [{type: 'average', name: '平均值'}]
                     }
+                }], [{
+                    type: 'value',
                 }]);
                 let cpuChart = renderEcharts('cpu_monitor', 'CPU监控', undefined, res.data.times, [{
                     name: '使用率',
@@ -241,7 +243,15 @@
                     markLine: {
                         data: [{type: 'average', name: '平均值'}]
                     }
-                }], '{value} %', '单位 %');
+                }], [{
+                    name: '单位 %',
+                    min: 0,
+                    max: 100,
+                    type: 'value',
+                    axisLabel: {
+                        formatter: '{value} %'
+                    }
+                }]);
                 let memoryChart = renderEcharts('memory_monitor', '内存', {
                     x: 'left',
                     data: ["内存", "Swap"]
@@ -269,7 +279,15 @@
                     markLine: {
                         data: [{type: 'average', name: '平均值'}]
                     }
-                }], '{value} M', '单位 MB');
+                }], [{
+                    name: '单位 MB',
+                    min: 0,
+                    max: res.data.mem_total,
+                    type: 'value',
+                    axisLabel: {
+                        formatter: '{value} M'
+                    }
+                }]);
                 let networkChart = renderEcharts('network_monitor', '网络', {
                     x: 'left',
                     data: ["出", "入"]
@@ -297,7 +315,13 @@
                     markLine: {
                         data: [{type: 'average', name: '平均值'}]
                     }
-                }], '{value} Kb', '单位 Kb/s');
+                }], [{
+                    name: '单位 Kb/s',
+                    type: 'value',
+                    axisLabel: {
+                        formatter: '{value} Kb'
+                    }
+                }]);
 
                 // 在窗口大小改变时，重置图表大小
                 window.addEventListener("resize", function () {
@@ -313,20 +337,14 @@
     });
 
     // 渲染图表
-    function renderEcharts(element_id, title, legend = undefined, data_xAxis, series, formatter = '{value}', yName = '') {
+    function renderEcharts(element_id, title, legend = undefined, data_xAxis, series, yAxis = undefined) {
         var Chart = echarts.init(document.getElementById(element_id), layui.echartsTheme);
         var option = {
             title: {text: title, x: 'center', textStyle: {fontSize: 20}},
             tooltip: {trigger: 'axis'},
             legend: legend,
             xAxis: [{type: 'category', boundaryGap: false, data: data_xAxis}],
-            yAxis: [{
-                name: yName,
-                type: 'value',
-                axisLabel: {
-                    formatter: formatter
-                }
-            }],
+            yAxis: yAxis,
             dataZoom: {
                 show: true,
                 realtime: true,