EmailBill/openspec/changes/archive/2026-02-17-chart-optimization/tasks.md

1. 饼图中心金额展示

• 1.1 创建饼图中心文本绘制插件或自定义 afterDraw 钩子
• 1.2 计算并格式化总金额（人民币格式 ¥xx,xxx.xx）
• 1.3 实现响应式字体大小调整（图表高度的20%）
• 1.4 确保文字水平和垂直居中显示
• 1.5 适配暗色主题颜色

2. 饼图标签位置优化

• 2.1 调整 Chart.js datalabels 配置，将标签移至扇区外侧
• 2.2 配置引导线连接标签与对应扇区
• 2.3 确保标签显示分类名称而非仅图标
• 2.4 实现标签防重叠逻辑（小扇区自动调整位置）
• 2.5 必要时使用图例(legend)作为标签替代方案

3. 折线图日期范围过滤

• 3.1 在折线图组件中获取当前日期
• 3.2 实现数据过滤函数，移除未来日期数据点
• 3.3 同步过滤 labels 和 datasets 数据
• 3.4 处理历史月份数据（展示完整月份）
• 3.5 添加日期范围说明文字（可选）

4. 预算页面报错修复

• 4.1 定位并修复预算页面的 JavaScript 运行时错误
• 4.2 添加错误边界处理防止单个组件错误影响整个页面
• 4.3 验证所有交互功能正常工作
• 4.4 添加错误日志记录（开发环境）

5. 仪表图布局修复

• 5.1 使用 CSS Flexbox 实现容器垂直水平居中
• 5.2 设置图表 maintainAspectRatio: false 和固定高度
• 5.3 调整容器内边距确保与上下元素保持16px间距
• 5.4 测试不同屏幕尺寸下的布局表现
• 5.5 修复暗色主题下的颜色适配

6. 测试与验证

• 6.1 运行前端 lint 检查
• 6.2 验证所有图表在移动端和桌面端的显示效果
• 6.3 测试暗色/亮色主题切换
• 6.4 运行 pnpm build 确保无构建错误
• 6.5 功能验收测试

实施总结

完成的工作

1. 饼图中心金额展示 (Web/src/plugins/chartjs-pie-center-plugin.ts)

   • 创建了新的 Chart.js 插件 pieCenterTextPlugin
   • 在支出分类饼图中心显示总支出金额
   • 支持响应式字体大小和暗色主题

2. 折线图日期范围过滤 (Web/src/views/statisticsV2/modules/DailyTrendChart.vue)

   • 修改数据准备逻辑，过滤掉当前日期之后的未来日期
   • 历史月份展示完整日期范围

3. 预算页面修复 (Web/src/components/Budget/BudgetChartAnalysis.vue)

   • 注册 chartjsGaugePlugin 插件解决报错
   • 修复模板语法错误（多行 @click 表达式）
   • 调整仪表图布局使其居中显示
   • 设置 maintainAspectRatio: false 确保布局正确

文件变更

• 新增: Web/src/plugins/chartjs-pie-center-plugin.ts
• 修改: Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue
• 修改: Web/src/views/statisticsV2/modules/DailyTrendChart.vue
• 修改: Web/src/components/Budget/BudgetChartAnalysis.vue

验证结果

• ✅ 构建成功 (pnpm build)
• ✅ Lint 检查通过（仅现有警告，无新增错误）