EmailBill/openspec/changes/archive/2026-02-17-fix-statistics-chart-styles/design.md

title, author, date, status

title	author	date	status
图表样式优化设计文档	AI Assistant	2026-02-16	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，使其根据图表类型自动调整默认配置

理由:

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

实现:

// 新增根据图表类型获取配置的方法
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 色彩系统
• Chart.js 配置文档
• WCAG 颜色对比度指南