c49f66757e
Some checks failed
Docker Build & Deploy / Build Docker Image (push) Waiting to run
Docker Build & Deploy / Deploy to Production (push) Has been cancelled
Docker Build & Deploy / Cleanup Dangling Images (push) Has been cancelled
Docker Build & Deploy / WeChat Notification (push) Has been cancelled
1.7 KiB
1.7 KiB
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%
用户体验：
- 图表动画更流畅
- 触控操作更灵敏
- 视觉风格更现代化