---
title: 图表样式优化设计文档
author: AI Assistant
date: 2026-02-16
status: draft
---

## Context

### 当前状态
应用中的图表存在以下样式问题：

1. **支出分类饼图 (ExpenseCategoryCard.vue)**
   - 问题：显示了不应该有的坐标轴（X轴 0-7，Y轴 ¥0-¥1）
   - 原因：`useChartTheme.ts` 中的基础配置默认包含坐标轴，饼图配置未覆盖
   
2. **使用情况仪表盘 (BudgetChartAnalysis.vue)**
   - 问题：仪表盘周围有坐标轴和网格线干扰
   - 影响：视觉上显得混乱，不够简洁

3. **预算进度燃尽图**
   - 现状：样式基本可用，但缺乏现代感
   - 可优化：颜色对比度、网格线样式、动画效果

### 技术背景
- 使用 Chart.js 4.5+ 和 vue-chartjs 5.3+
- 主题配置通过 `useChartTheme.ts` 统一管理
- 支持 Vant UI 的暗色模式

## Goals / Non-Goals

**Goals:**
1. 移除所有饼图/环形图/仪表盘的不必要坐标轴
2. 统一图表的视觉风格，符合 Vant 设计系统
3. 优化配色方案，提高可读性和美观度
4. 增强动画效果，提升交互体验
5. 确保暗色模式下的显示效果

**Non-Goals:**
- 不添加新的图表类型
- 不修改业务逻辑或数据结构
- 不改变现有的 API 接口

## Decisions

### Decision 1: 图表类型感知配置

**选择**: 修改 `useChartTheme.ts`，使其根据图表类型自动调整默认配置

**理由**:
- 饼图/环形图/仪表盘不需要坐标轴
- 折线图/柱状图需要坐标轴但可简化
- 减少每个组件手动覆盖配置的重复工作

**实现**:
```typescript
// 新增根据图表类型获取配置的方法
const getChartOptionsByType = (type: 'line' | 'bar' | 'pie' | 'doughnut', customOptions = {}) => {
  const baseOptions = baseChartOptions.value
  
  // 无坐标轴图表类型
  if (['pie', 'doughnut'].includes(type)) {
    return mergeDeep(baseOptions, {
      scales: { x: { display: false }, y: { display: false } }
    }, customOptions)
  }
  
  return mergeDeep(baseOptions, customOptions)
}
```

**替代方案**: 在每个使用饼图的组件中手动添加 `scales: { x: { display: false }, y: { display: false } }`
- **排除原因**: 重复代码多，容易遗漏

### Decision 2: 简化坐标轴样式

**选择**: 对于需要坐标轴的图表，采用极简风格

**具体措施**:
- 网格线：使用极淡的颜色 (`--van-border-color` 30% 透明度)
- 刻度标签：减小字体大小至 10px
- 移除坐标轴边框 (`drawBorder: false`)

**理由**:
- 减少视觉噪音，突出数据本身
- 移动设备上更清晰的阅读体验

### Decision 3: 优化配色方案

**选择**: 使用更现代、和谐的颜色方案

**具体措施**:
1. **主色调扩展**:
   - 保留 Vant 主题色作为基础
   - 添加柔和的辅助色（降低饱和度）
   
2. **饼图/环形图**:
   - 使用 8 色渐进色板
   - 颜色从 Vant 主题派生但降低饱和度 20%
   
3. **折线图/柱状图**:
   - 支出：暖色调（橙红系）
   - 收入：冷色调（青绿系）
   - 对比度符合 WCAG AA 标准

**理由**:
- 更符合现代移动端 UI 审美
- 色盲友好

### Decision 4: 增强交互体验

**选择**: 添加微妙的悬停和点击效果

**具体措施**:
1. **悬停效果**:
   - 饼图扇区：`hoverOffset: 8`（从 4 增加）
   - 折线点：`pointHoverRadius: 6`（从 4 增加）
   
2. **动画优化**:
   - 持续时间：750ms → 600ms（更快响应）
   - 缓动函数：`easeInOutQuart` → `easeOutQuart`（更自然的结束）
   
3. **触控优化**:
   - 增加触控目标大小
   - 支持捏合缩放（对于趋势图）

## Risks / Trade-offs

**风险 1**: 颜色变更可能影响用户习惯
- **影响**: 低 - 纯视觉变化
- **缓解**: 保持色相大致不变，只调整饱和度和明度

**风险 2**: 移除坐标轴可能降低某些图表的可读性
- **影响**: 中 - 对于复杂数据集
- **缓解**: 保留关键刻度，仅淡化网格线

**风险 3**: 动画增强可能影响低性能设备
- **影响**: 低 - 已考虑 `prefers-reduced-motion`
- **缓解**: 动画持续时间控制在 600ms 以内

## Migration Plan

### 实施顺序
1. **Phase 1**: 修复坐标轴问题（最高优先级）
   - 修改 `useChartTheme.ts`
   - 更新 `ExpenseCategoryCard.vue`
   - 更新 `BudgetChartAnalysis.vue`

2. **Phase 2**: 配色优化
   - 更新图表色板
   - 调整渐变效果

3. **Phase 3**: 动画和交互增强
   - 优化悬停效果
   - 添加触控支持

### 回滚策略
- 所有变更都是样式层面的
- 可通过 git revert 回滚
- 建议分步提交，便于部分回滚

## Open Questions

1. 是否需要提供图表主题切换开关（明亮/暗黑/高对比度）？
2. 预算页面的仪表盘是否需要添加中心数值显示？
3. 是否需要支持图表数据的导出功能？

## 附录

### 参考资源
- [Vant Design 色彩系统](https://vant-ui.github.io/vant/#/zh-CN/design-color)
- [Chart.js 配置文档](https://www.chartjs.org/docs/latest/configuration/)
- [WCAG 颜色对比度指南](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html)