1

openspec/changes/archive/2026-02-17-chart-optimization/design.md

@@ -0,0 +1,51 @@
+## Context
+
+当前图表系统使用 Chart.js 作为底层库，通过 Vue 3 组件封装在 `Web/src/components/Charts/` 目录下。存在以下问题：
+
+1. **支出分类饼图**: 使用镂空饼图(Doughnut)但未在中心展示总金额，分类标签直接覆盖在图表上导致与图标重叠
+2. **收支折线图**: 展示整月日期（1-31日），即使当前只有部分日期有数据，剩余日期显示为平直线
+3. **预算仪表图**: 存在运行时错误，仪表图在容器中布局错位
+
+## Goals / Non-Goals
+
+**Goals:**
+- 在饼图中心展示总金额，优化数据可读性
+- 修复折线图展示无效未来日期的问题
+- 修复预算页面报错
+- 调整仪表图布局使其居中展示
+
+**Non-Goals:**
+- 不更换图表库（仍使用 Chart.js）
+- 不改变现有配色方案
+- 不添加新的图表类型
+
+## Decisions
+
+### 1. 饼图中心展示方案
+**选择**: 使用 Chart.js 的 `plugins.datalabels` 配合自定义 `afterDraw` 钩子在中心绘制文本
+**理由**: 比使用 HTML overlay 更简洁，与 Chart.js 原生集成，响应式适配更好
+**替代方案**: HTML 绝对定位 overlay（更灵活但增加复杂度）
+
+### 2. 折线图日期范围过滤
+**选择**: 在组件层根据 `data.length` 动态计算 `labels` 数组，过滤掉未来日期
+**理由**: 数据源包含整月数据但当前日期后无实际值，前端过滤避免后端改动
+**替代方案**: 修改后端 API 返回（需要协调后端，改动成本高）
+
+### 3. 仪表图布局修复
+**选择**: 使用 CSS Flexbox 垂直水平居中，配合 `maintainAspectRatio: false` 和固定高度
+**理由**: 解决容器自适应导致的错位问题，确保在不同屏幕尺寸下保持居中
+
+## Risks / Trade-offs
+
+- **[风险]** 饼图中心文字在小屏幕上可能显示不全 → **缓解**: 使用相对字体大小，添加 `resize` 监听器动态调整
+- **[风险]** 折线图动态范围可能影响用户查看完整月度趋势的预期 → **缓解**: 在图表下方添加日期范围说明文字
+- **[权衡]** 仪表图固定高度可能在极端屏幕尺寸下出现留白 → 接受此权衡，保证核心显示区域
+
+## Migration Plan
+
+无需迁移步骤，所有改动均为前端展示层优化，不影响数据存储。
+
+## Open Questions
+
+- 折线图是否需要添加切换按钮允许用户查看整月趋势？
+- 饼图中心文字格式是否需要支持多货币显示？