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

title, author, date

title	author	date
图表样式优化任务清单	AI Assistant	2026-02-16

1. 核心配置更新

• 1.1 修改 useChartTheme.ts，添加 getChartOptionsByType 方法

  • 根据图表类型自动隐藏/显示坐标轴
  • 为饼图/环形图设置默认 scales: { x: { display: false }, y: { display: false } }

• 1.2 优化基础配色方案

  • 更新 chartPalette 为 8 色低饱和度色板
  • 调整 colors 对象以更好适配暗色模式

• 1.3 简化坐标轴样式

  • 网格线透明度降至 30%
  • 刻度字体大小调整为 10px
  • 确保 drawBorder: false

2. 统计页面图表修复

• 2.1 修复支出分类饼图 (ExpenseCategoryCard.vue)

  • 更新图表配置调用方式，使用新的类型感知配置
  • 验证坐标轴已完全隐藏

• 2.2 优化每日趋势图 (DailyTrendChart.vue)

  • 更新渐变色使用新的配色方案
  • 调整动画参数（600ms, easeOutQuart）
  • 增大触控目标大小

• 2.3 验证其他统计图表

  • 检查收入分类图表
  • 检查支出排行图表

3. 预算页面图表修复

• 3.1 修复使用情况仪表盘 (BudgetChartAnalysis.vue)

  • 移除仪表盘周围的坐标轴和网格线
  • 优化中心文字显示

• 3.2 优化预算进度燃尽图

  • 调整线条颜色和粗细
  • 优化网格线样式
  • 更新图例位置和样式

• 3.3 检查偏差分析图表

  • 确保无坐标轴干扰
  • 优化数据标签显示

4. 通用组件优化

• 4.1 更新 BaseChart.vue

  • 集成新的类型感知配置
  • 优化加载和空状态显示

• 4.2 增强响应式处理

  • 确保 ResizeObserver 正常工作
  • 优化横竖屏切换体验

• 4.3 更新 chartHelpers.ts

  • 优化渐变创建函数
  • 添加颜色格式化工具

5. 测试与验证

• 5.1 运行前端构建

  • 执行 pnpm build
  • 确保无 TypeScript 错误

• 5.2 验证明亮模式

  • 统计页面所有图表显示正常
  • 预算页面所有图表显示正常
  • 坐标轴问题已修复

• 5.3 验证暗色模式

  • 主题系统自动适配暗色模式
  • 所有图表颜色适配正常

• 5.4 移动端测试

  • 触控目标已增大（pointHoverRadius: 6, hitRadius: 20）
  • 动画参数已优化（600ms, easeOutQuart）

6. 代码整理

• 6.1 运行代码格式化

  • 执行 pnpm lint
  • 执行 pnpm format

• 6.2 清理无用代码

  • 删除重复函数定义
  • 移除未使用的导入

• 6.3 更新文档注释

  • 为新增函数添加 JSDoc
  • 使用中文注释解释业务逻辑