南丁格尔玫瑰图面板
Rose PiePreview
南丁格尔玫瑰图（也称极坐标面积图），每个花瓣的角度和半径都编码支出金额。支出较大的类别有比例更大的花瓣，使相对量级一目了然。
图表类型
| 属性 | 值 |
|---|---|
| 库 | Apache ECharts，通过 BaseChart |
| 系列类型 | pie，roseType: 'area' |
| 源文件 | src/components/panels/RosePiePanel.tsx |
显示内容
按类别分解的月度支出。每个花瓣代表一个支出类别。area 玫瑰类型意味着角度和半径都随值缩放——因此每个花瓣的视觉面积与支出成正比。
数据从 monthlySummary 过滤，仅包含支出条目（type === 'EXPENSE' 且 total < 0），然后按金额从大到小排序。
主要功能
| 功能 | 详情 |
|---|---|
| 玫瑰类型 | area —— 花瓣角度和半径都编码值 |
| 标题中的总支出 | 在面板标题中格式化为 NZD |
| 按值排序 | 最大支出类别优先 |
| 弹性入场动画 | elasticOut 缓动，每段随机延迟 |
| 连接标签线 | 平滑曲线（smooth: 0.2）连接标签和花瓣 |
视觉细节
| 属性 | 值 |
|---|---|
| 半径 | 内 15%，外 80% |
| 中心 | [50%, 50%] |
| 边框 | 面板背景色，2px |
| 阴影 | 10px 模糊，rgba(0,0,0,0.15) |
| 标签字体 | 等宽，10px，次要文本色 |
| 标签线 | 面板边框色，10px + 15px 长度 |
| 动画 | animationType: 'scale'，animationEasing: 'elasticOut' |
| 动画延迟 | 每段 Math.random() * 200 毫秒 |
提示框
显示颜色点、类别名称、NZD 金额和占总额的百分比：
[点] 杂货
$1,250.00 (28.5%)交互操作
- 悬停 —— 标准 ECharts 饼图提示框，带类别颜色色块、名称、金额和百分比
- 动画 —— 每段以弹性缓动和随机延迟缩放入场，创建交错的绽放效果
数据来源
| 状态管理 | 字段 |
|---|---|
useFinanceStore | monthlySummary（过滤为 EXPENSE 类型） |
useChartTheme | 面板背景色、边框色和文本颜色 |
空状态
当月度摘要中没有支出条目时，在面板中居中显示"无支出数据"。