98 lines
2.6 KiB
Markdown
98 lines
2.6 KiB
Markdown
|
---
|
|||
|
|
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
|
|||
|
|
- 使用中文注释解释业务逻辑
|