9921cd5fdf
- Migrated 4 components from ECharts to Chart.js: * MonthlyExpenseCard.vue (折线图) * DailyTrendChart.vue (双系列折线图) * ExpenseCategoryCard.vue (环形图) * BudgetChartAnalysis.vue (仪表盘 + 多种图表) - Removed all ECharts imports and environment variable switches - Unified all charts to use BaseChart.vue component - Build verified: pnpm build success ✓ - No echarts imports remaining ✓ Refs: openspec/changes/migrate-remaining-echarts-to-chartjs
63 lines
2.9 KiB
Markdown
63 lines
2.9 KiB
Markdown
## 1. 基础设施搭建
|
||
|
||
- [x] 1.1 安装依赖：`pnpm add chart.js vue-chartjs`
|
||
- [x] 1.2 创建 `Web/src/composables/useChartTheme.ts`（主题配置 composable）
|
||
- [x] 1.3 创建 `Web/src/components/Charts/BaseChart.vue`（通用图表包装器）
|
||
- [x] 1.4 创建 `Web/src/plugins/chartjs-gauge-plugin.ts`（仪表盘插件）
|
||
- [x] 1.5 创建 `Web/src/utils/chartHelpers.ts`（图表工具函数：格式化、颜色等）
|
||
|
||
## 2. 迁移简单图表（验证基础设施）
|
||
|
||
- [x] 2.1 迁移 `MonthlyExpenseCard.vue`（柱状图，最简单）
|
||
- 保留原有 ECharts 代码，新增 Chart.js 实现
|
||
- 使用环境变量 `VITE_USE_CHARTJS` 控制切换
|
||
- [x] 2.2 验证 MonthlyExpenseCard 功能：tooltip、响应式、暗色模式
|
||
- [x] 2.3 迁移 `ExpenseCategoryCard.vue`（饼图）
|
||
- 实现点击跳转到分类详情功能
|
||
- 实现 "Others" 分组逻辑（<3% 的分类）
|
||
- [x] 2.4 验证 ExpenseCategoryCard 功能：点击事件、颜色映射
|
||
|
||
## 3. 迁移折线图
|
||
|
||
- [x] 3.1 迁移 `DailyTrendChart.vue`（基础折线图）
|
||
- 实现双线（expense + income）配置
|
||
- 实现缩放功能（使用 chartjs-plugin-zoom）
|
||
- [x] 3.2 验证 DailyTrendChart 功能：周/月/年切换、缩放、高亮最大值点
|
||
|
||
## 4. 迁移复杂图表（BudgetChartAnalysis）
|
||
|
||
- [x] 4.1 迁移月度仪表盘（使用 Doughnut + centerText 插件）
|
||
- 实现居中文本显示（余额/差额）
|
||
- 实现超支时颜色变化（红色/绿色）
|
||
- 实现 scaleX(-1) 镜像效果（支出类型）
|
||
- [x] 4.2 迁移年度仪表盘（复用月度逻辑）
|
||
- [x] 4.3 迁移方差图（Variance Chart）
|
||
- 实现横向柱状图
|
||
- 实现实际 vs 预算的双柱对比
|
||
- 实现超支/节省的颜色标识
|
||
- [x] 4.4 迁移月度燃尽图（Burndown Chart）
|
||
- 实现双线（理想线 + 实际线）
|
||
- 实现投影线（dotted line extension）
|
||
- [x] 4.5 迁移年度燃尽图（复用月度逻辑）
|
||
- 实现当前月高亮标记
|
||
- [x] 4.6 验证 BudgetChartAnalysis 所有交互：tab 切换、tooltip、响应式
|
||
|
||
## 5. 优化与测试
|
||
|
||
- [x] 5.1 实现 `prefers-reduced-motion` 支持（禁用动画）
|
||
- [x] 5.2 实现数据抽样（decimation plugin）用于大数据量场景
|
||
- [x] 5.3 测试所有图表的暗色模式适配
|
||
- [x] 5.4 测试所有图表的移动端触控交互（tap, pinch, swipe）
|
||
- [x] 5.5 测试边界情况：空数据、单条数据、超长分类名
|
||
- [x] 5.6 性能测试：Lighthouse Performance 分数对比
|
||
|
||
## 6. 清理与上线
|
||
|
||
- [x] 6.1 移除所有组件中的 ECharts 代码（删除旧实现）
|
||
- [x] 6.2 移除环境变量 `VITE_USE_CHARTJS`（默认使用 Chart.js）
|
||
- [x] 6.3 从 `package.json` 移除 `echarts` 依赖
|
||
- [x] 6.4 运行 `pnpm build` 并分析 bundle 大小（验证优化效果）
|
||
- [x] 6.5 更新 `AGENTS.md`：记录 Chart.js 使用规范
|
||
- [x] 6.6 创建 `.doc/chart-migration-checklist.md`（手动测试清单）
|
||
- [x] 6.7 提交代码并部署到测试环境
|