## 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

- 折线图是否需要添加切换按钮允许用户查看整月趋势？
- 饼图中心文字格式是否需要支持多货币显示？