From 0c7b0307731165a3740fe20b7fb962b5e810d967 Mon Sep 17 00:00:00 2001
From: claude_dev <claude-dev@sanguo.local>
Date: Sat, 11 Jul 2026 23:16:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(charts):=20=E5=9B=9E=E6=B5=8B=E7=BB=93?=
 =?UTF-8?q?=E6=9E=9C5=E5=9B=BEcanvas=E5=AE=BD=E5=BA=A6=E4=BB=85100px?=
 =?UTF-8?q?=E8=A2=AB=E5=8E=8B=E6=89=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因: useChart 在 onMounted 调 echarts.init 时, 容器(在 el-tab-pane 内)尚未拿到
真实宽度 → canvas 用默认 100px; 且 setOption 后从不 resize, 数据异步到达后 canvas
仍停在初始窄宽 → 5 条曲线全被压成窄条。

修复(useChart 一处, 全部图表受益):
- setOption 后调 chart.resize() (数据到达时容器已布局, 同步真实宽度)
- 加 ResizeObserver 监听容器尺寸变化 (兼容 init 偏早 / tab 切换 / 窗口缩放)
- ensureChart() 懒初始化兜底

验证: canvas 宽 100→830px(满宽), 5 图横向铺满曲线正常
---
 frontend/src/composables/useChart.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/composables/useChart.ts b/frontend/src/composables/useChart.ts
index 9846ecf..d86578d 100644
--- a/frontend/src/composables/useChart.ts
+++ b/frontend/src/composables/useChart.ts
@@ -4,9 +4,18 @@ import * as echarts from 'echarts'
 
 export function useChart(el: Ref<HTMLDivElement | undefined>) {
   let chart: echarts.ECharts | null = null
+  let ro: ResizeObserver | null = null
+
+  function ensureChart(): void {
+    if (!chart && el.value) chart = echarts.init(el.value)
+  }
 
   function setOption(option: echarts.EChartsCoreOption): void {
+    ensureChart()
     chart?.setOption(option, true)
+    // 数据通常在容器布局完成后才到（父组件异步拉取），此处同步一次尺寸，
+    // 避免 canvas 停在 init 时的窄宽（tab/初始化偏早导致）。
+    chart?.resize()
   }
 
   function resize(): void {
@@ -14,12 +23,18 @@ export function useChart(el: Ref<HTMLDivElement | undefined>) {
   }
 
   onMounted(() => {
-    if (el.value) chart = echarts.init(el.value)
+    ensureChart()
+    // ResizeObserver: 容器拿到真实宽度 / tab 切换 / 窗口变化时自动 resize
+    if (el.value && typeof ResizeObserver !== 'undefined') {
+      ro = new ResizeObserver(() => chart?.resize())
+      ro.observe(el.value)
+    }
     window.addEventListener('resize', resize)
   })
 
   onUnmounted(() => {
     window.removeEventListener('resize', resize)
+    ro?.disconnect()
     chart?.dispose()
     chart = null
   })