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