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
2.4 KiB
2.4 KiB
Context
当前图表系统使用 Chart.js 作为底层库，通过 Vue 3 组件封装在 Web/src/components/Charts/ 目录下。存在以下问题：
- 支出分类饼图: 使用镂空饼图(Doughnut)但未在中心展示总金额，分类标签直接覆盖在图表上导致与图标重叠
- 收支折线图: 展示整月日期（1-31日），即使当前只有部分日期有数据，剩余日期显示为平直线
- 预算仪表图: 存在运行时错误，仪表图在容器中布局错位
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
- 折线图是否需要添加切换按钮允许用户查看整月趋势？
- 饼图中心文字格式是否需要支持多货币显示？