## 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变更**: 纯前端显示层修复 - **向后兼容**: 无破坏性变更