# 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 插件生态丰富，未来可按需添加更多功能（如导出、缩放等）