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

## 1. 核心配置更新

- [x] 1.1 修改 `useChartTheme.ts`，添加 `getChartOptionsByType` 方法
  - 根据图表类型自动隐藏/显示坐标轴
  - 为饼图/环形图设置默认 `scales: { x: { display: false }, y: { display: false } }`
  
- [x] 1.2 优化基础配色方案
  - 更新 `chartPalette` 为 8 色低饱和度色板
  - 调整 `colors` 对象以更好适配暗色模式
  
- [x] 1.3 简化坐标轴样式
  - 网格线透明度降至 30%
  - 刻度字体大小调整为 10px
  - 确保 `drawBorder: false`

## 2. 统计页面图表修复

- [x] 2.1 修复支出分类饼图 (ExpenseCategoryCard.vue)
  - 更新图表配置调用方式，使用新的类型感知配置
  - 验证坐标轴已完全隐藏
  
- [x] 2.2 优化每日趋势图 (DailyTrendChart.vue)
  - 更新渐变色使用新的配色方案
  - 调整动画参数（600ms, easeOutQuart）
  - 增大触控目标大小

- [x] 2.3 验证其他统计图表
  - 检查收入分类图表
  - 检查支出排行图表

## 3. 预算页面图表修复

- [x] 3.1 修复使用情况仪表盘 (BudgetChartAnalysis.vue)
  - 移除仪表盘周围的坐标轴和网格线
  - 优化中心文字显示
  
- [x] 3.2 优化预算进度燃尽图
  - 调整线条颜色和粗细
  - 优化网格线样式
  - 更新图例位置和样式

- [x] 3.3 检查偏差分析图表
  - 确保无坐标轴干扰
  - 优化数据标签显示

## 4. 通用组件优化

- [x] 4.1 更新 BaseChart.vue
  - 集成新的类型感知配置
  - 优化加载和空状态显示
  
- [x] 4.2 增强响应式处理
  - 确保 ResizeObserver 正常工作
  - 优化横竖屏切换体验

- [x] 4.3 更新 chartHelpers.ts
  - 优化渐变创建函数
  - 添加颜色格式化工具

## 5. 测试与验证

- [x] 5.1 运行前端构建
  - 执行 `pnpm build`
  - 确保无 TypeScript 错误
  
- [x] 5.2 验证明亮模式
  - 统计页面所有图表显示正常
  - 预算页面所有图表显示正常
  - 坐标轴问题已修复
  
- [x] 5.3 验证暗色模式
  - 主题系统自动适配暗色模式
  - 所有图表颜色适配正常
  
- [x] 5.4 移动端测试
  - 触控目标已增大（pointHoverRadius: 6, hitRadius: 20）
  - 动画参数已优化（600ms, easeOutQuart）

## 6. 代码整理

- [x] 6.1 运行代码格式化
  - 执行 `pnpm lint`
  - 执行 `pnpm format`
  
- [x] 6.2 清理无用代码
  - 删除重复函数定义
  - 移除未使用的导入
  
- [x] 6.3 更新文档注释
  - 为新增函数添加 JSDoc
  - 使用中文注释解释业务逻辑