c49f66757e
Some checks failed
Docker Build & Deploy / Build Docker Image (push) Waiting to run
Docker Build & Deploy / Deploy to Production (push) Has been cancelled
Docker Build & Deploy / Cleanup Dangling Images (push) Has been cancelled
Docker Build & Deploy / WeChat Notification (push) Has been cancelled
52 lines
2.4 KiB
Markdown
52 lines
2.4 KiB
Markdown
## 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
|
||
|
||
- 折线图是否需要添加切换按钮允许用户查看整月趋势？
|
||
- 饼图中心文字格式是否需要支持多货币显示？
|