我将修改 `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` 组件属性配置。 ### 预期效果: 新的环形图将清晰地展示考试的整体进度和成绩分布,消除数据重叠带来的误解,并且在视觉上更加美观、专业。