Files
EmailBill/openspec/changes/archive/2026-02-17-fix-stats-chart-bugs/tasks.md
SunCheng 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
1
2026-02-18 21:16:45 +08:00

1.1 KiB
Raw Blame History

1. 图表布局修复

  • 1.1 检查 BaseChart.vue 响应式配置,确保 maintainAspectRatio: false 和 responsive: true
  • 1.2 为统计卡片添加 CSS 约束,设置 overflow: hidden 和固定高度
  • 1.3 验证图表在移动端(<375px下正常缩放无溢出

2. 折线图数据过滤

  • 2.1 在统计页面组件中添加当前日期获取逻辑
  • 2.2 实现数据过滤函数,根据周期类型(日/周/月/年)截断未来日期数据
  • 2.3 更新折线图数据传递,仅传递过滤后的数据
  • 2.4 验证 X 轴不再显示未来日期

3. 饼图标签渲染

  • 3.1 安装 chartjs-plugin-datalabels 插件
  • 3.2 在 useChartTheme.ts 中添加饼图标签配置
  • 3.3 实现标签位置计算和扇区大小阈值控制(<5% 隐藏标签)
  • 3.4 添加暗色模式下的标签颜色适配逻辑
  • 3.5 验证标签在各类别扇区上正确显示

4. 测试与验证

  • 4.1 运行前端 lint 检查
  • 4.2 在桌面端验证所有图表显示正常
  • 4.3 在移动端验证响应式布局
  • 4.4 验证暗色模式下图表标签可读性