♥️作者：小宋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集合中，也就是我们的返回集合，就大功告成了。