EmailBill/openspec/changes/migrate-to-chartjs/proposal.md at 77c9b47246ce107b2eb17a4b5c4f409fd1969622

Files

SunCheng 9921cd5fdf 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

2026-02-16 21:55:38 +08:00

1.7 KiB

Raw Blame History

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%

用户体验：

图表动画更流畅
触控操作更灵敏
视觉风格更现代化

1.7 KiB Raw Blame History Unescape Escape

Why