从花哨的数据，到清楚的一笔账

一步步拆解设计决定

1. 01

   明确问题

   首页回答“这个月花了多少、主要花在哪、刚才那笔是什么”。

2. 02

   统一口径

   明确显示月份与示例数据标识，避免把演示数值当成真实账户。

3. 03

   选择比较方式

   分类支出用简单横向条形与数值，统一零基线；避免三维饼图。

4. 04

   收敛颜色

   大部分信息使用中性色，选中与重点有清楚但克制的强调。

把规则带进代码

const total = categories.reduce((sum, item) => sum + item.amount, 0);
const share = total ? item.amount / total : 0;
// 标签与条形共用同一份数据，避免数值和视觉不一致。