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