凸凹图
Bump ChartPreview
追踪支出类别之间每月的排名变化。排名第 1 表示该月支出最高的类别。
图表类型
| 属性 | 值 |
|---|---|
| 库 | Apache ECharts，通过 BaseChart |
| 系列类型 | line（每个类别一条线） |
| 源文件 | src/components/panels/BumpChartPanel.tsx |
显示内容
每条线代表一个支出类别。Y 轴显示排名位置（反转，排名 1 在顶部）。当类别在支出上彼此超越时，它们的线会交叉——很容易看出一个类别何时超过另一个。
排名通过在每个月内按月支出排序类别，然后分配连续排名来计算。
主要功能
| 功能 | 详情 |
|---|---|
| 反转 Y 轴 | inverse: true —— 排名 1 在顶部 |
| 平滑曲线 | smooth: 0.3 实现柔和曲线 |
| 末端标签 | 类别名称显示在每条线的右端 |
| 类别着色线条 | 每条线使用该类别分配的颜色 |
| 聚焦强调 | 悬停时高亮一条类别线，其他线变淡 |
| Y 轴标签 | 格式化为 #1、#2、#3 等 |
| X 轴标签 | 通过 lib/formatting.ts 的 formatMonth() 格式化 |
视觉细节
- 线宽：2.5px
- 符号：
circle，大小 8 - 符号边框：面板背景色，2px 宽（创建内嵌点效果）
- 末端标签字体：等宽，10px，颜色匹配类别
- 网格：左 40px，右 110px（为末端标签留空间），上 20px，下 30px
交互操作
- 悬停 ——
emphasis.focus: 'series'高亮悬停的线（宽度增加到 4px）并淡化所有其他线 - 提示框 —— 通过 BaseChart 的标准 ECharts 提示框
数据来源
| 状态管理 | 字段 |
|---|---|
mockMonthlyByCategory | 来自 src/mocks/personalData.ts 的模拟数据 |
useFinanceStore | isMockMode 标志 |
useChartTheme | 轴样式、分割线、标签颜色 |
数据目前来自模拟数据。每个条目包含 month、category、amount 和 color 字段。连接 Akahu 后，将从月度摘要存储中提取。