EmailBill/openspec/changes/migrate-remaining-echarts-to-chartjs/proposal.md at 9921cd5fdfb3d5f58fef5462278993a0f3663e17

Files

SunCheng 9921cd5fdf chore: migrate remaining ECharts components to Chart.js

- 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

2026-02-16 21:55:38 +08:00

1.8 KiB

Raw Blame History

Why

项目构建失败：4 个前端组件仍引用已移除的 echarts 依赖，导致 Vite 构建报错。项目已完成 Chart.js 技术栈标准化（见 AGENTS.md），现需彻底清理残留的 ECharts 代码，确保所有图表组件使用统一的 Chart.js + vue-chartjs 实现。

What Changes

将 4 个组件的图表实现从 ECharts API 迁移到 Chart.js API
使用项目已有的现代化图表基础设施：
- BaseChart.vue 通用图表组件
- useChartTheme.ts composable（自动适配暗色模式）
- chartHelpers.ts 工具函数
移除所有 import * as echarts from 'echarts' 语句
清理环境变量开关（如 VITE_USE_CHARTJS），统一使用 Chart.js
保持图表的视觉效果和交互行为不变

Capabilities

New Capabilities

chart-migration-patterns: 从 ECharts 到 Chart.js 的迁移模式和最佳实践，涵盖仪表盘图表、折线图、饼图等常见图表类型的转换方法

Modified Capabilities

无（不修改现有规范，仅实施技术栈迁移）

Impact

受影响的组件（4 个）：

Web/src/components/Budget/BudgetChartAnalysis.vue - 预算仪表盘图表
Web/src/views/statisticsV2/modules/DailyTrendChart.vue - 日趋势折线图
Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue - 支出分类饼图
Web/src/views/statisticsV2/modules/MonthlyExpenseCard.vue - 月度支出折线图

依赖：

✅ Chart.js 4.5.1 和 vue-chartjs 5.3.3 已安装
✅ 基础设施（BaseChart、useChartTheme、chartHelpers）已就绪
❌ 移除 echarts 相关代码后无回退路径

测试策略：

白盒测试：组件单元测试（Jest + Vue Test Utils）
黑盒测试：浏览器端到端测试（Playwright）
视觉回归测试：截图对比确保图表外观一致

1.8 KiB Raw Blame History Unescape Escape

Why