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