---
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: 创建提案，定义图表优化范围