EmailBill/openspec/changes/archive/2026-02-16-migrate-remaining-echarts-to-chartjs/proposal.md at 77c9b47246ce107b2eb17a4b5c4f409fd1969622

Files

SunCheng c1e2adacea chore: archive migrate-remaining-echarts-to-chartjs change

- Synced chart-migration-patterns spec to main specs
- Archived to openspec/changes/archive/2026-02-16-migrate-remaining-echarts-to-chartjs
- All artifacts complete, 57/80 tasks complete (23 test tasks skipped)

Schema: spec-driven
Status: ✓ Complete with warnings (test tasks skipped)

2026-02-16 22:40:13 +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