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
1.6 KiB
1.6 KiB
Context
统计页图表基于 chart.js + vue-chartjs 渲染，目前存在饼图扇区直接绘制分类文字、仪表盘包含颠倒文字与多余数字的问题。需要在不改变数据含义的前提下，优化文字展示规则与仪表盘弧度范围，让关键信息更清晰。
Goals / Non-Goals
Goals:
- 移除饼图扇区直接文本绘制，保留清晰的分类信息呈现方式。
- 仪表盘仅显示“已用/预算/余额”三项核心信息，去除颠倒与冗余文字。
- 仪表盘弧形从半圆略微加大，增强视觉完整度但不改变指标含义。
Non-Goals:
- 不调整数据计算逻辑与接口返回结构。
- 不变更其他统计图表的主题或配色体系。
Decisions
- 关闭饼图扇区文本绘制插件或数据标签绘制逻辑，分类名称改为列表/图例承载（现有列表区域保留）。
- 备选：将标签外置引线。未选原因：当前空间有限且易与小扇区重叠。
- 仪表盘中心区域仅保留三项文本，统一排布与字号层级，移除额外数字绘制。
- 备选：保留次要刻度文本。未选原因：当前视觉干扰与颠倒问题更明显。
- 调整仪表盘弧度参数（如
circumference/rotation）使弧形超过 180°，但不封闭成全圆。- 备选：改为全圆。未选原因：与“预算进度”语义不匹配。
Risks / Trade-offs
- [标签信息依赖列表/图例] → 确保列表/图例在移动端默认可见。
- [弧度调整影响布局] → 保持容器尺寸与中心文本布局自适应，避免遮挡。