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
This commit is contained in:
SunCheng
2026-02-16 21:55:38 +08:00
parent a88556c784
commit 9921cd5fdf
77 changed files with 6964 additions and 1632 deletions

View File

@@ -0,0 +1,40 @@
## Why
当前项目使用 ECharts 作为图表库,虽然功能强大,但存在包体积过大(~800KB、视觉风格不够现代化、移动端性能表现一般等问题。Chart.js 是一个轻量级(~200KB、现代化的图表库特别适合移动端应用且 vue-chartjs 提供了良好的 Vue 3 集成支持,能够显著提升应用性能和用户体验。
## What Changes
- 移除 `echarts` 依赖,添加 `chart.js``vue-chartjs`
- 重构所有使用 ECharts 的图表组件,改用 Chart.js 实现
- 优化图表配色方案,使用更现代化的 Material Design 或 Vant 主题配色
- 优化移动端触控交互和响应式适配
- 更新相关文档和示例代码
## Capabilities
### New Capabilities
- `chartjs-integration`: Chart.js 与 Vue 3 的集成配置、主题系统、通用图表组件封装
### Modified Capabilities
- `budget-visualization`: 预算相关的图表展示(月度/年度仪表盘、燃尽图、方差图等)
- `statistics-charts`: 统计页面的图表(日趋势图、分类饼图、月度柱状图等)
## Impact
**前端组件**
- `Web/src/components/Budget/BudgetChartAnalysis.vue`5 个图表)
- `Web/src/views/statisticsV2/modules/DailyTrendChart.vue`(折线图)
- `Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue`(饼图)
- `Web/src/views/statisticsV2/modules/MonthlyExpenseCard.vue`(柱状图)
**依赖项**
- `Web/package.json`:移除 `echarts@^6.0.0`,添加 `chart.js``vue-chartjs`
**构建产物**
- 预计减少约 600KB 的 bundle 体积gzipped 后约 150KB
- 首屏加载时间预计优化 15-20%
**用户体验**
- 图表动画更流畅
- 触控操作更灵敏
- 视觉风格更现代化