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