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
4.6 KiB
4.6 KiB
Chart.js 迁移测试清单
迁移日期: 2026-02-16
迁移范围: 从 ECharts 6.0 迁移到 Chart.js 4.5 + vue-chartjs 5.3
测试环境
- 浏览器：Chrome、Firefox、Safari
- 移动设备：Android、iOS
- 屏幕尺寸：320px、375px、414px、768px
功能测试
MonthlyExpenseCard（月度支出卡片 - 柱状图）
位置: Web/src/views/statisticsV2/modules/MonthlyExpenseCard.vue
- 图表正常渲染（周/月/年切换）
- Tooltip 显示正确（日期格式、金额格式）
- 响应式调整（横屏/竖屏切换）
- 暗色模式适配（切换主题后图表颜色正确）
- 空数据显示（无数据时显示"暂无数据"）
ExpenseCategoryCard（支出分类卡片 - 饼图）
位置: Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue
- 饼图正常渲染
- 分类颜色映射正确
- "Others" 合并逻辑（>8个分类时自动合并）
- 点击分类跳转到详情页
- Tooltip 显示分类名称、金额和百分比
- 暗色模式适配
DailyTrendChart（日趋势图 - 折线图）
位置: Web/src/views/statisticsV2/modules/DailyTrendChart.vue
- 折线图正常渲染（支出/收入双线）
- 周/月/年切换正常
- 缩放功能（pinch 手势）
- 高亮最大值点
- Tooltip 正确显示日期和金额
- 暗色模式适配
BudgetChartAnalysis（预算分析 - 仪表盘+燃尽图+方差图）
位置: Web/src/components/Budget/BudgetChartAnalysis.vue
月度仪表盘
- 仪表盘正常渲染（半圆形）
- 中心文本显示余额/差额
- 超支时颜色变为红色
- scaleX(-1) 镜像效果（支出类型）
- 底部统计信息正确
年度仪表盘
- 仪表盘正常渲染
- 超支时颜色变化
- 数据更新时动画流畅
方差图（Variance Chart）
- 横向柱状图渲染
- 实际 vs 预算对比清晰
- 超支/节省颜色标识
- Tooltip 显示详细信息
月度燃尽图（Burndown Chart）
- 理想线 + 实际线正确显示
- 投影线（dotted line）显示
- 当前日期高亮
年度燃尽图
- 12个月数据点显示
- 当前月高亮标记
- Tooltip 显示月度数据
性能测试
Bundle 大小
- 构建产物大小对比（ECharts vs Chart.js）
- 预期减少：~600KB（未压缩）/ ~150KB（gzipped）
- 首屏加载时间对比
- 预期提升：15-20%
Lighthouse 测试
- Performance 分数对比
- 目标：+5 分
- FCP (First Contentful Paint) 对比
- LCP (Largest Contentful Paint) 对比
大数据量测试
- 365 天数据（年度统计）
- 数据抽样功能（decimation）生效
- 图表渲染时间 <500ms
交互测试
触控交互
- Tap 高亮（点击图表元素）
- Pinch 缩放（折线图）
- Swipe 滚动（大数据量图表）
动画测试
- 图表加载动画流畅（750ms）
- prefers-reduced-motion 支持
- 开启后图表无动画，直接显示
兼容性测试
暗色模式
- 所有图表颜色适配暗色模式
- 文本颜色可读性
- 边框/网格颜色正确
响应式
- 320px 屏幕（iPhone SE）
- 375px 屏幕（iPhone 12）
- 414px 屏幕（iPhone 12 Pro Max）
- 768px 屏幕（iPad Mini）
- 横屏/竖屏切换
边界情况
- 空数据（无交易记录）
- 单条数据
- 超长分类名（自动截断 + tooltip）
- 超大金额（格式化显示）
- 负数金额（支出）
回归测试
业务逻辑
- 预算超支/节省计算正确
- 分类统计数据准确
- 时间范围筛选正常
- 数据更新时图表刷新
视觉对比
- 截图对比（ECharts vs Chart.js）
- 颜色一致性
- 布局一致性
- 字体大小一致性
已知问题
- BudgetChartAnalysis 组件未完全迁移：由于复杂度较高，燃尽图和方差图需要额外开发时间
- IconSelector.vue 构建错误：项目中存在 Vue 3 语法错误（v-model on prop），需要修复后才能构建
回滚方案
如果测试发现严重问题，可以通过以下步骤回滚：
- 修改
.env.development：VITE_USE_CHARTJS=false - 重新安装 ECharts：
pnpm add echarts@^6.0.0 - 重启开发服务器：
pnpm dev
备注
- 所有图表组件都保留了 ECharts 实现，通过环境变量
VITE_USE_CHARTJS控制切换 - 测试通过后，可以删除 ECharts 相关代码以进一步减小包体积
- Chart.js 插件生态丰富，未来可按需添加更多功能（如导出、缩放等）