支出面板
展示当月支出按分类分解的树状图。单元格大小与支出金额成正比，直观展示资金去向。
显示内容
ECharts 树状图，每个单元格代表一个支出类别：
| 元素 | 详情 |
|---|---|
| 单元格大小 | 与该类别的总支出成正比 |
| 单元格颜色 | 与分类设置中的类别颜色一致 |
| 单元格标签 | 类别名称 + 紧凑的 NZD 金额 |
| 标题 | 当月总支出 |
| 空状态 | 无支出数据时显示"无支出数据" |
主要功能
- 比例大小 —— 支出较高的类别占据更多视觉面积，最大的支出一目了然。
- 类别颜色 —— 每个单元格使用该类别分配的颜色（与交易、预算和支出面板使用相同颜色）。
- 丰富标签 —— 每个单元格同时显示类别名称和紧凑格式化的金额。
- 标题总计 —— 面板标题显示总支出金额供快速参考。
数据来源
| 状态管理 | 字段 |
|---|---|
useFinanceStore | monthlySummary（过滤为 EXPENSE 类型） |
图表通过 BaseChart.tsx 渲染。所有金额使用 formatNZD() 格式化。
交互操作
| 操作 | 结果 |
|---|---|
| 悬停单元格 | 提示框显示类别名称和精确金额 |
此面板主要是可视化展示。分类管理在交易面板中进行。