9921cd5fdf
- 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
41 lines
1.7 KiB
Markdown
41 lines
1.7 KiB
Markdown
## 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%
|
||
|
||
**用户体验**：
|
||
- 图表动画更流畅
|
||
- 触控操作更灵敏
|
||
- 视觉风格更现代化
|