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