feat(frontend): 统计页接入 ECharts,四张图(油价/油耗/费用/成本)
把 Statistics 从占位 Empty 升级成真正的图表页,plan §9.4 落地:
- echarts + vue-echarts,按需引入 CanvasRenderer / LineChart / BarChart
+ Grid / Tooltip / Legend / Title / DataZoom(全部 tree-shakable)
- 四张图,每张独立 NCard,统一主题色 brand #18a058
1) 油价趋势(折线 + 面积)—— 每月 total_amount / total_liters 当月均价
2) 标准油耗趋势(折线)—— 每月在"连续两次 is_full"之间采样的均值
3) 月度费用(柱状)—— 每月加油 total_amount 之和
4) 每公里成本(折线)—— 同油耗采样算法
- 时间窗选择:近 3 月 / 6 月 / 12 月 / 全部(NSelect 顶栏)
- 油耗 / 每公里成本采样逻辑与后端 pkg/decimal 严格对齐:
* 列表按 refuel_time 升序遍历
* 只在"is_full 序列"内采样
* 半箱油记录自动跳过,不污染指标
- autoresize 适配移动端旋转 / 桌面窗口
- Loading / Empty / Error 状态完整;切车自动重拉
未做(留待后续):
- DataZoom 区域缩放 —— 已在 echarts 引入但没启用,数据量大时再上
- 多车辆对比 —— 计划里没明确要求,先不上
- 油价对比基准线(同地区均值) —— 暂无数据源
验证:
pnpm typecheck 0 errors
pnpm build 18.1s(echarts 入了 4 个组件 + 1 个 renderer,bundle 略增)
KennethCheng
33dfdc824c