162 lines
4.6 KiB
Markdown
162 lines
4.6 KiB
Markdown
|
# 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）
|
|||
|
|
- [ ] 颜色一致性
|
|||
|
|
- [ ] 布局一致性
|
|||
|
|
- [ ] 字体大小一致性
|
|||
|
|
|
|||
|
|
## 已知问题
|
|||
|
|
|
|||
|
|
1. **BudgetChartAnalysis 组件未完全迁移**：由于复杂度较高，燃尽图和方差图需要额外开发时间
|
|||
|
|
2. **IconSelector.vue 构建错误**：项目中存在 Vue 3 语法错误（v-model on prop），需要修复后才能构建
|
|||
|
|
|
|||
|
|
## 回滚方案
|
|||
|
|
|
|||
|
|
如果测试发现严重问题，可以通过以下步骤回滚：
|
|||
|
|
|
|||
|
|
1. 修改 `.env.development`：`VITE_USE_CHARTJS=false`
|
|||
|
|
2. 重新安装 ECharts：`pnpm add echarts@^6.0.0`
|
|||
|
|
3. 重启开发服务器：`pnpm dev`
|
|||
|
|
|
|||
|
|
## 备注
|
|||
|
|
|
|||
|
|
- 所有图表组件都保留了 ECharts 实现，通过环境变量 `VITE_USE_CHARTJS` 控制切换
|
|||
|
|
- 测试通过后，可以删除 ECharts 相关代码以进一步减小包体积
|
|||
|
|
- Chart.js 插件生态丰富，未来可按需添加更多功能（如导出、缩放等）
|