diff --git a/web/src/views/monitor/IndexView.vue b/web/src/views/monitor/IndexView.vue index 33d4f49a..eee380fb 100644 --- a/web/src/views/monitor/IndexView.vue +++ b/web/src/views/monitor/IndexView.vue @@ -281,15 +281,32 @@ function formatMemory(value: number | string): string { } // 基础图表配置 -function createBaseOption(valueFormatter?: any) { +function createBaseOption(valueFormatter?: any, timeRangeMs?: number) { + // 根据时间范围决定刻度间隔:大于1天用4小时,否则用2小时 + const oneDayMs = 24 * 60 * 60 * 1000 + const hourInterval = timeRangeMs && timeRangeMs > oneDayMs ? 4 : 2 + const xAxisConfig = { type: 'category' as const, boundaryGap: false, data: [] as string[], axisLabel: { + interval: (index: number, value: string) => { + // 根据时间范围动态调整刻度间隔 + const timePart = value.split(' ')[1] || '' + const hour = parseInt(timePart.split(':')[0] || '0', 10) + const minute = parseInt(timePart.split(':')[1] || '0', 10) + return minute === 0 && hour % hourInterval === 0 + }, formatter: (value: string) => { - // 只显示时间部分 - return value.split(' ')[1] || value + // 显示日期和时间两行:MM-DD\nHH:mm + const parts = value.split(' ') + const datePart = parts[0] || '' + const timePart = parts[1] || value + // 从 YYYY-MM-DD 提取 MM-DD + const dateMatch = datePart.match(/\d{2}-\d{2}$/) + const shortDate = dateMatch ? dateMatch[0] : datePart + return `${shortDate}\n${timePart}` } } } @@ -307,7 +324,7 @@ function createBaseOption(valueFormatter?: any) { left: 60, right: 20, top: 50, - bottom: 60 + bottom: 80 }, xAxis: xAxisConfig, yAxis: [ @@ -328,7 +345,8 @@ function createBaseOption(valueFormatter?: any) { // 负载图表配置 const loadOption = computed(() => { - const base = createBaseOption() + const timeRange = loadTime.value.end - loadTime.value.start + const base = createBaseOption(undefined, timeRange) return { ...base, xAxis: { ...base.xAxis, data: loadData.value?.times || [] }, @@ -366,7 +384,8 @@ const loadOption = computed(() => { // CPU图表配置 const cpuOption = computed(() => { - const base = createBaseOption((value: any) => `${value}%`) + const timeRange = cpuTime.value.end - cpuTime.value.start + const base = createBaseOption((value: any) => `${value}%`, timeRange) return { ...base, xAxis: { ...base.xAxis, data: cpuData.value?.times || [] }, @@ -406,7 +425,8 @@ const cpuOption = computed(() => { // 内存图表配置 const memOption = computed(() => { - const base = createBaseOption(formatMemory) + const timeRange = memTime.value.end - memTime.value.start + const base = createBaseOption(formatMemory, timeRange) const total = parseFloat(memData.value?.mem?.total || '0') return { ...base, @@ -457,7 +477,8 @@ const memOption = computed(() => { // 网络图表配置 const netOption = computed(() => { - const base = createBaseOption(formatSpeed) + const timeRange = netTime.value.end - netTime.value.start + const base = createBaseOption(formatSpeed, timeRange) // 根据选中的网卡筛选数据 const devices = @@ -499,7 +520,8 @@ const netOption = computed(() => { // 磁盘IO图表配置 const diskIOOption = computed(() => { - const base = createBaseOption(formatSpeed) + const timeRange = diskIOTime.value.end - diskIOTime.value.start + const base = createBaseOption(formatSpeed, timeRange) // 根据选中的磁盘筛选数据 const disks =