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