From 3c57fa76bf2979ca0e868d170e9a233f69431903 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=87=B9=E5=87=B8=E6=9B=BC?= <alpiny@qq.com>
Date: Sun, 25 Jun 2023 11:26:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E9=A1=B5=E5=9B=BE=E8=A1=A8Y=E8=BD=B4=E6=95=B0=E5=AD=97?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E5=92=8C=E5=AE=BD=E5=BA=A6=EF=BC=8C=E9=98=B2?=
 =?UTF-8?q?=E6=AD=A2=E6=95=B0=E5=AD=97=E8=BF=87=E9=95=BF=E6=BA=A2=E5=87=BA?=
 =?UTF-8?q?=20#1422=20(#1423)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 凹凸曼 <xx@xx>
---
 .../src/views/host/monitor/monitor/index.vue  | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/host/monitor/monitor/index.vue b/frontend/src/views/host/monitor/monitor/index.vue
index b08571537..6874c05a6 100644
--- a/frontend/src/views/host/monitor/monitor/index.vue
+++ b/frontend/src/views/host/monitor/monitor/index.vue
@@ -389,9 +389,13 @@ function initCharts(chartName: string, xDatas: any, yDatas: any, yTitle: string,
         legend: {
             data: chartName === 'loadNetworkChart' && [i18n.global.t('monitor.up'), i18n.global.t('monitor.down')],
         },
-        grid: { left: '7%', right: '7%', bottom: '20%' },
+        grid: {
+            left: getSideWidth(chartName == 'loadNetworkChart'),
+            right: getSideWidth(chartName == 'loadNetworkChart'),
+            bottom: '20%',
+        },
         xAxis: { data: xDatas },
-        yAxis: { name: '( ' + formatStr + ' )' },
+        yAxis: { name: '( ' + formatStr + ' )', axisLabel: { fontSize: chartName == 'loadNetworkChart' ? 10 : 12 } },
         dataZoom: [{ startValue: zoomStart.value }],
         series: yDatas,
     };
@@ -599,13 +603,20 @@ function initIOCharts(item: Monitor.MonitorData) {
                 i18n.global.t('monitor.readWriteTime'),
             ],
         },
-        grid: { left: '7%', right: '7%', bottom: '20%' },
+        grid: { left: getSideWidth(true), right: getSideWidth(true), bottom: '20%' },
         xAxis: {
             data: ioDate,
         },
         yAxis: [
-            { type: 'value', name: '( KB/s )' },
-            { type: 'value', position: 'right', alignTicks: true },
+            { type: 'value', name: '( KB/s )', axisLabel: { fontSize: 10 } },
+            {
+                type: 'value',
+                position: 'right',
+                alignTicks: true,
+                axisLabel: {
+                    fontSize: 10,
+                },
+            },
         ],
         dataZoom: [{ startValue: zoomStart.value }],
         series: [
@@ -700,6 +711,10 @@ function loadEmptyData() {
     return [0, 0];
 }
 
+function getSideWidth(b: boolean) {
+    return !b || document.body.clientWidth > 1600 ? '7%' : '10%';
+}
+
 function changeChartSize() {
     echarts.getInstanceByDom(document.getElementById('loadLoadChart') as HTMLElement)?.resize();
     echarts.getInstanceByDom(document.getElementById('loadCPUChart') as HTMLElement)?.resize();