c49f66757e
Some checks failed
Docker Build & Deploy / Build Docker Image (push) Waiting to run
Docker Build & Deploy / Deploy to Production (push) Has been cancelled
Docker Build & Deploy / Cleanup Dangling Images (push) Has been cancelled
Docker Build & Deploy / WeChat Notification (push) Has been cancelled
68 lines
2.1 KiB
Markdown
68 lines
2.1 KiB
Markdown
---
|
||
title: 图表样式全面优化
|
||
author: AI Assistant
|
||
date: 2026-02-16
|
||
status: draft
|
||
category: UI/UX
|
||
---
|
||
|
||
## Why
|
||
|
||
当前应用中统计页面和预算页面的图表样式存在明显问题：
|
||
1. **支出分类饼图**出现了不应该有的坐标轴（X轴0-7，Y轴¥0-¥1），严重干扰视觉
|
||
2. **使用情况仪表盘**周围也有坐标轴干扰，影响美观
|
||
3. 所有图表整体样式缺乏现代感，显得凌乱
|
||
|
||
为提升用户体验和视觉品质，需要对应用内所有图表进行全面样式优化。
|
||
|
||
## What Changes
|
||
|
||
### 统计页面 (Statistics)
|
||
- **修复** 支出分类饼图的坐标轴问题，移除所有不必要的坐标轴和网格线
|
||
- **优化** 收入/支出趋势图的样式，使其更简洁清晰
|
||
- **统一** 图表配色方案，与 Vant 设计系统保持一致
|
||
- **改进** 图表响应式布局和触控交互体验
|
||
|
||
### 预算页面 (Budget)
|
||
- **修复** 使用情况仪表盘（月度/年度）的坐标轴干扰
|
||
- **优化** 预算进度燃尽图的视觉层次和颜色对比度
|
||
- **美化** 偏差分析图表的数据展示形式
|
||
- **统一** 图表组件的圆角、阴影等视觉元素
|
||
|
||
### 通用改进
|
||
- 更新 Chart.js 全局配置，移除默认坐标轴样式
|
||
- 为暗色模式优化图表颜色
|
||
- 添加平滑的动画过渡效果
|
||
- 确保所有图表在移动设备上的可读性
|
||
|
||
## Capabilities
|
||
|
||
### New Capabilities
|
||
- `chart-theme-system`: 统一的图表主题系统，支持明暗模式切换和主题色自动适配
|
||
- `responsive-chart-layout`: 响应式图表布局组件，自动适配不同屏幕尺寸
|
||
|
||
### Modified Capabilities
|
||
- 无现有 spec 需要修改（本次主要是样式优化，不涉及功能需求变更）
|
||
|
||
## Impact
|
||
|
||
**受影响文件**:
|
||
- `Web/src/components/Charts/BaseChart.vue`
|
||
- `Web/src/composables/useChartTheme.ts`
|
||
- `Web/src/views/StatisticsView.vue`
|
||
- `Web/src/views/BudgetView.vue`
|
||
- `Web/src/utils/chartHelpers.ts`
|
||
|
||
**依赖**:
|
||
- Chart.js 4.5+
|
||
- vue-chartjs 5.3+
|
||
- Vant UI 主题系统
|
||
|
||
**风险**:
|
||
- 低 - 纯样式变更，不影响业务逻辑
|
||
- 需验证所有图表在暗色模式下的可读性
|
||
|
||
## 更新日志
|
||
|
||
- 2026-02-16: 创建提案，定义图表优化范围
|