♥️作者：小宋1021
🤵‍♂️个人主页：小宋1021主页
♥️坚持分析平时学习到的项目以及学习到的软件开发知识，和大家一起努力呀！！！
🎈🎈加油！ 加油！ 加油！ 加油
🎈欢迎评论 💬点赞👍🏻 收藏 📂加关注+！

展示：

前端：

 //top5柱状图
    var chartDom1 = document.getElementById('barsEchart1')
    var myChart1 = echarts.init(chartDom1)
  var option1

  option1 = {
    title: {
    text: '教师成绩Top5',
  }, 
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: listTOP5.value.teacherNames
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data:listTOP5.value.teacherScores,
      type: 'bar'
    }
  ]
};

  option1 && myChart1.setOption(option1)
  window.addEventListener('resize', function() {
    myChart1.resize();
});

赋值语句：

const dataKPI = await TeacherMonthExamApi.teacherExamAnalysisKPI(queryParams)
listKPI.value = dataKPI.list[0]

自适应语句（放到图表结束后）：

window.addEventListener('resize', function () {
      myChart1.resize()
    })

后端向前端返回的数据类型：

一个是字符串的数组、一个是数字的数组

需要与echarts官网的数据类型一致。

后端：

XML（可忽略）：

 <!--    教师成绩分析表柱状图-->
    <select id="teacherExamAnalysisTOP5" resultType="java.util.Map">
        SELECT
        STRING_AGG(subquery.teacher_name, ', ') AS teachers_names,
        STRING_AGG(subquery.exam_score::TEXT, ', ') AS teachers_scores
        FROM (
        SELECT
        htm.teacher_name,
        htme.exam_score::INTEGER AS exam_score
        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>
        ORDER BY
        htme.exam_score::INTEGER DESC,
        htm.teacher_name ASC
        LIMIT 5
        ) AS subquery;



    </select>

Mapper：

    //教师成绩TOP5
    IPage<Map> teacherExamAnalysisTOP5(IPage page,@Param("dataPageReqVO") DataPageReqVO dataPageReqVO);

Service

//教师成绩TOP5
    PageResult<Map> teacherExamAnalysisTOP5(DataPageReqVO dataPageReqVO);

实现类：

   //教师成绩分析表TOP5
    @Override
    public PageResult<Map> teacherExamAnalysisTOP5(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.teacherExamAnalysisTOP5(page,dataPageReqVO);
        // 获取查询结果的记录
        List<Map> records = page.getRecords();

        // 对每条记录进行操作
        for (Map<String, Object> record : records) {
            // 拿到老师姓名字符串转换成字符串数组
            String[] teacherNames = record.get("teachers_names").toString().split(",");

            String[] scores =  record.get("teachers_scores").toString().split(",");
            // 创建一个整数数组，长度与字符串数组相同
            Integer[] scores2 = new Integer[scores.length];
            // 循环遍历字符串数组，并将每个字符串转换为整数
            for (int i = 0; i < scores.length; i++) {
                scores2[i] = Integer.parseInt(scores[i].trim()); // 使用 trim() 去除可能的前后空白字符
            }
            record.put("teacherNames", teacherNames);
            record.put("teacherScores", scores2);

        }
        return new PageResult<>(page.getRecords(), page.getTotal());
    }

controller：

    @GetMapping("/sale-audition/teacherExamAnalysisTOP5")
    @Operation(summary = "教师成绩分析表TOP5")
    public CommonResult teacherExamAnalysisTOP5(@Valid DataPageReqVO pageReqVO) {
        return success(dataService.teacherExamAnalysisTOP5(pageReqVO));
    }