♥️作者：小宋1021
🤵♂️个人主页：小宋1021主页
♥️坚持分析平时学习到的项目以及学习到的软件开发知识，和大家一起努力呀！！！
🎈🎈加油！ 加油！ 加油！ 加油
🎈欢迎评论 💬点赞👍🏻 收藏 📂加关注+！
展示：
编辑
前端：
//饼图 var chartDom = document.getElementById('barsEchart') var myChart = echarts.init(chartDom) var option option = { title: { text: '成绩人数占比', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { type: 'pie', radius: '50%', data: listPie.value.test, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; option && myChart.setOption(option) window.addEventListener('resize', function() { myChart.resize(); });
赋值语句：
const dataKPI = await TeacherMonthExamApi.teacherExamAnalysisKPI(queryParams) listKPI.value = dataKPI.list[0]
后端向前端返回的结果：
编辑
我们要与echarts官网的数据格式相对应，value和name也要一一对应
编辑
后端：
我为了返回的时候返回value和name，所以提前定义了一个实体类，用于定义和接收数据：
编辑
package com.todod.education.module.study.controller.admin.data.vo; import lombok.Data; @Data public class TeacherData { private int value; private String name; public TeacherData(int value, String name) { this.value = value; this.name = name; } }
XML文件（可忽略）：
<!-- 教师成绩分析表KPI--> <select id="teacherExamAnalysisKPI" resultType="java.util.Map"> SELECT COUNT(CASE WHEN htme.exam_score::integer = 150 THEN 1 END) AS perfect_score_count, (SELECT MAX(htme_inner.exam_score::integer) FROM hr_teacher_month_exam htme_inner) AS highest_score, COUNT(CASE WHEN htme.exam_score::integer BETWEEN 0 AND 60 THEN 1 ELSE NULL END) AS score_0_60_count, COUNT(CASE WHEN htme.exam_score::integer BETWEEN 61 AND 120 THEN 1 ELSE NULL END) AS score_61_120_count, COUNT(CASE WHEN htme.exam_score::integer BETWEEN 121 AND 150 THEN 1 ELSE NULL END) AS score_121_150_count FROM hr_teacher_month_exam htme JOIN hr_teacher_manage htm ON htm.id = htme.teacher_id WHERE htme.deleted = 0 AND htm.deleted = 0 <if test=" dataPageReqVO.years != null "> AND EXTRACT(YEAR FROM (htme.exam_date)) = CAST(#{dataPageReqVO.years} AS numeric) </if> <if test=" dataPageReqVO.months != null "> AND EXTRACT(MONTH FROM (htme.exam_date)) = CAST(#{dataPageReqVO.months} AS numeric) </if> </select>
Mapper：
//教师成绩分析表KPI IPage<Map> teacherExamAnalysisKPI(IPage page,@Param("dataPageReqVO") DataPageReqVO dataPageReqVO);
Service：
//教师成绩分析表KPI PageResult<Map> teacherExamAnalysisKPI(DataPageReqVO dataPageReqVO);
实现类：
//教师成绩分析表KPI @Override public PageResult<Map> teacherExamAnalysisKPI(DataPageReqVO dataPageReqVO) { IPage<Map> page = new Page<>(dataPageReqVO.getPageNo(), dataPageReqVO.getPageSize()); if (dataPageReqVO.getYears() != null && !dataPageReqVO.getYears().isEmpty()) { dataPageReqVO.setYears(dataPageReqVO.getYears().substring(0, 4)); } if (dataPageReqVO.getMonths() != null && !dataPageReqVO.getMonths().isEmpty() ){ dataPageReqVO.setMonths(dataPageReqVO.getMonths().substring(6, 7)); } dataMapper.teacherExamAnalysisKPI(page,dataPageReqVO); // 获取查询结果的记录 List<Map> records = page.getRecords(); // 对每条记录进行操作 for (Map<String, Object> record : records) { HashMap<Integer,String > teacherExam = new HashMap<>(); List<Object> pieData = new ArrayList<>(); TeacherData item1 = new TeacherData(Integer.parseInt(record.get("score_0_60_count").toString()), "0~60分人数"); TeacherData item2 = new TeacherData(Integer.parseInt(record.get("score_61_120_count").toString()), "61~120分人数"); TeacherData item3 = new TeacherData(Integer.parseInt(record.get("score_121_150_count").toString()), "121~150分人数"); pieData.add(item1); pieData.add(item2); pieData.add(item3); record.put("test", pieData); } return new PageResult<>(page.getRecords(), page.getTotal()); }
由于我这个是通过map结果集直接从数据库返回的，并没有对应的DO实体类，所以我要在实现类里做一步操作：
// 获取查询结果的记录
List<Map> records = page.getRecords();
// 对每条记录进行操作
for (Map<String, Object> record : records) {}
获取查询出来的map集合在对每一条进行操作
List<Object> pieData = new ArrayList<>(); TeacherData item1 = new TeacherData(Integer.parseInt(record.get("score_0_60_count").toString()), "0~60分人数"); TeacherData item2 = new TeacherData(Integer.parseInt(record.get("score_61_120_count").toString()), "61~120分人数"); TeacherData item3 = new TeacherData(Integer.parseInt(record.get("score_121_150_count").toString()), "121~150分人数"); pieData.add(item1); pieData.add(item2); pieData.add(item3); record.put("test", pieData);
定义一个对象的集合与前端想要接受的数据类型匹配，再用我们之前定义的TeacherData，定义三个对象，再依次插入到对象集合pieData中，最后put到record集合中，也就是我们的返回集合，就大功告成了。
