Web_BLV_OA_Exam_Prod/.trae/documents/升级考试统计饼图为现代环形图.md

我将修改 src/pages/admin/AdminDashboardPage.tsx 文件，将原本逻辑有误且样式陈旧的实心饼图升级为现代化的环形图 (Donut Chart)。

具体修改计划：

1. 修正数据计算逻辑：

   • 目前的逻辑中，“已完成”、“合格”、“优秀”存在包含关系，导致饼图数据重叠。
   • 新逻辑（确保各部分互斥且总和为总人数）：
     • 未完成 (Incomplete): 总人数 - 已完成
     • 不及格 (Failed): 已完成 - 合格
     • 合格 (Passed): 合格 - 优秀 (即“合格但未达优秀”)
     • 优秀 (Excellent): 优秀人数
   • 这样四个部分加起来正好等于总人数，能准确反映分布情况。

2. 升级图表视觉效果：

   • 环形设计：设置 innerRadius={40} 和 outerRadius={60}，将饼图变为环形图，视觉上更轻量现代。
   • 颜色优化：使用 Ant Design 标准色板：
     • 优秀: #fa8c16 (橙色)
     • 合格: #52c41a (绿色)
     • 不及格: #ff4d4f (红色)
     • 未完成: #f0f0f0 (浅灰，降低视觉干扰)
   • 交互优化：
     • 移除杂乱的外部连线 Label，保持界面整洁。
     • 优化 Tooltip，鼠标悬停时显示具体人数和占比。
     • 在环形图中心添加文字（如“总计”或完成率），充分利用空间。

3. 代码实现：

   • 修改 AdminDashboardPage.tsx 中的 pieData 生成逻辑。
   • 更新 Recharts 的 Pie 组件属性配置。

预期效果：

新的环形图将清晰地展示考试的整体进度和成绩分布，消除数据重叠带来的误解，并且在视觉上更加美观、专业。