174 lines
5.1 KiB
Markdown
174 lines
5.1 KiB
Markdown
|
---
|
|||
|
|
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)
|