github
/
1Panel
mirror of https://github.com/1Panel-dev/1Panel
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: 优化监控页图表Y轴数字大小和宽度，防止数字过长溢出 #1422 (#1423) 

Co-authored-by: 凹凸曼 <xx@xx>
pull/1440/head
凹凸曼 2023-06-25 11:26:17 +08:00 committed by GitHub
parent 3fa4a240f7
commit 3c57fa76bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/views/host/monitor/monitor/index.vue
View File

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