30 lines
1.4 KiB
Markdown
30 lines
1.4 KiB
Markdown
|
## Why
|
|||
|
|
|
|||
|
|
统计页面的图表存在两个影响用户体验的显示问题：折线图超出卡片边界且显示未来日期的平直线段，饼图缺少直接的分类标签展示。这些问题降低了数据可视化的直观性和美观度，需要修复以提升用户查看统计数据的体验。
|
|||
|
|
|
|||
|
|
## What Changes
|
|||
|
|
|
|||
|
|
- 修复折线图（Line Chart）在统计卡片中的溢出布局问题，确保图表完全包含在卡片边界内
|
|||
|
|
- 修改折线图数据截止时间逻辑，从显示完整自然周期（如整月）改为仅显示至当前日期，避免未来日期形成无意义的平直线段
|
|||
|
|
- 优化支出分类饼图（Pie Chart），在饼图扇区上直接显示分类名称标签，提升可读性
|
|||
|
|
|
|||
|
|
## Capabilities
|
|||
|
|
|
|||
|
|
### New Capabilities
|
|||
|
|
- `chart-layout-constraint`: 图表在容器内的自适应布局和边界约束控制
|
|||
|
|
- `chart-data-filtering`: 基于当前日期的动态数据过滤和范围控制
|
|||
|
|
- `chart-label-overlay`: 饼图扇区上的直接标签渲染和位置计算
|
|||
|
|
|
|||
|
|
### Modified Capabilities
|
|||
|
|
- （无现有能力需要修改需求）
|
|||
|
|
|
|||
|
|
## Impact
|
|||
|
|
|
|||
|
|
- **受影响组件**:
|
|||
|
|
- `Web/src/components/Charts/BaseChart.vue` - 基础图表组件
|
|||
|
|
- `Web/src/views/Statistics/` 下的统计页面组件
|
|||
|
|
- `Web/src/composables/useChartTheme.ts` - 图表主题配置
|
|||
|
|
- **图表库**: Chart.js 配置选项调整
|
|||
|
|
- **无API变更**: 纯前端显示层修复
|
|||
|
|
- **向后兼容**: 无破坏性变更
|