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）
|
|||
|
|
- 视觉回归测试：截图对比确保图表外观一致
|