c1e2adacea
- 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)
41 lines
1.8 KiB
Markdown
41 lines
1.8 KiB
Markdown
## 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）
|
||
- 视觉回归测试：截图对比确保图表外观一致
|