♥️作者：小宋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)); }
