mysql有一个成绩表,表中的学生成绩划分为优、良、中、及格、不及格,用集成mybatis-plus的idea显示出基于学生成绩等级的echart直方图和扇形图

时间: 2023-11-18 18:06:17 浏览: 45
首先,需要创建一个成绩表,包含学生姓名和成绩等级两个字段。假设表名为 `score`,建表语句如下: ```sql CREATE TABLE `score` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(50) NOT NULL COMMENT '学生姓名', `level` varchar(10) NOT NULL COMMENT '成绩等级', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='学生成绩表'; ``` 然后,需要在项目中引入 MyBatis-Plus 和 ECharts 相关的依赖。这里以 Maven 为例,在 pom.xml 中添加以下依赖: ```xml <!-- MyBatis-Plus --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>${mybatis-plus.version}</version> </dependency> <!-- ECharts --> <dependency> <groupId>com.github.abel533</groupId> <artifactId>echarts</artifactId> <version>${echarts.version}</version> </dependency> <!-- Jackson --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>${jackson.version}</version> </dependency> ``` 其中,`${mybatis-plus.version}`、`${echarts.version}` 和 `${jackson.version}` 分别表示 MyBatis-Plus、ECharts 和 Jackson 的版本号。 接着,需要创建一个 Mapper 接口和对应的 XML 文件,实现查询成绩等级及其数量的功能。Mapper 接口代码如下: ```java @Mapper public interface ScoreMapper extends BaseMapper<Score> { /** * 查询成绩等级及其数量 * * @return 成绩等级及其数量列表 */ @Select("SELECT level, COUNT(*) AS count FROM score GROUP BY level") List<Map<String, Object>> selectLevelCount(); } ``` XML 文件代码如下: ```xml <?xml version="1.0" encoding="UTF-8" ?> <mapper namespace="com.example.mapper.ScoreMapper"> <resultMap id="levelCountMap" type="java.util.HashMap"> <id column="level" property="level"/> <result column="count" property="count"/> </resultMap> <select id="selectLevelCount" resultMap="levelCountMap"> SELECT level, COUNT(*) AS count FROM score GROUP BY level </select> </mapper> ``` 然后,需要编写一个 Controller 类,实现查询并处理数据,返回给前端。代码如下: ```java @RestController @RequestMapping("/score") public class ScoreController { @Autowired private ScoreMapper scoreMapper; /** * 查询成绩等级及其数量 * * @return 成绩等级及其数量列表 */ @GetMapping("/levelCount") public List<Map<String, Object>> selectLevelCount() { return scoreMapper.selectLevelCount(); } } ``` 最后,编写前端页面,使用 ECharts 绘制直方图和扇形图。代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>成绩统计</title> <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script> </head> <body> <div id="barChart" style="width: 800px;height:400px;"></div> <div id="pieChart" style="width: 800px;height:400px;"></div> <script> // 基于准备好的dom,初始化echarts实例 var barChart = echarts.init(document.getElementById('barChart')); var pieChart = echarts.init(document.getElementById('pieChart')); // 指定图表的配置项和数据 var option1 = { title: { text: '成绩等级分布' }, tooltip: {}, xAxis: { type: 'category', data: [] }, yAxis: { type: 'value' }, series: [{ name: '人数', type: 'bar', data: [] }] }; var option2 = { title: { text: '成绩等级比例' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: [] }, series: [ { name: '等级', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [] } ] }; // 发送 Ajax 请求,获取数据 $.ajax({ url: '/score/levelCount', type: 'GET', dataType: 'json', success: function (data) { var levels = []; var counts = []; var pieData = []; for (var i = 0; i < data.length; i++) { var level = data[i].level; var count = data[i].count; levels.push(level); counts.push(count); pieData.push({value: count, name: level}); } option1.xAxis.data = levels; option1.series[0].data = counts; barChart.setOption(option1); option2.legend.data = levels; option2.series[0].data = pieData; pieChart.setOption(option2); } }); </script> </body> </html> ``` 以上就是基于 MyBatis-Plus 和 ECharts 显示成绩等级分布的示例代码。

相关推荐

最新推荐

recommend-type

MyBatis-Plus多表联合查询并且分页(3表联合)

主要介绍了MyBatis-Plus多表联合查询并且分页(3表联合),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
recommend-type

springboot集成mybatis-plus遇到的问题及解决方法

主要介绍了springboot集成mybatis-plus遇到的问题及解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
recommend-type

Mybatis-plus基于redis实现二级缓存过程解析

主要介绍了Mybatis-plus基于redis实现二级缓存过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
recommend-type

mybatis-plus配置控制台打印完整带参数SQL语句的实现

主要介绍了mybatis-plus配置控制台打印完整带参数SQL语句,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
recommend-type

MyBatis-Plus 通用IService使用详解

主要介绍了MyBatis-Plus 通用IService使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

MATLAB取整函数与Web开发的作用:round、fix、floor、ceil在Web开发中的应用

![MATLAB取整函数与Web开发的作用:round、fix、floor、ceil在Web开发中的应用](https://img-blog.csdnimg.cn/2020050917173284.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmdqaWVsZWFybmluZw==,size_16,color_FFFFFF,t_70) # 1. MATLAB取整函数概述** MATLAB取整函数是一组强大的工具,用于对数值进行
recommend-type

我想做python的算法工程师,我应该学什么?学习的顺序是什么?网上有什么推荐的免费课程吗?回答具体精确一点不要太笼统

对于想要成为 Python 算法工程师的人来说,他们应该先从掌握 Python 的基础语法开始,然后学习数据结构和算法,并且要深入了解 Python 中的一些科学计算和数据处理库,比如 NumPy、Pandas 等。 学习的顺序可以是先学习基础语法和编程技巧,然后再学习数据结构和算法相关的知识,最后深入了解数据处理和科学计算相关的库。 对于免费课程的推荐,我建议你可以先去 Coursera、edX、Udacity 等网站上寻找相关课程,这些网站上有很多优质的 Python 编程和算法课程,你可以根据自己的需求和学习进度进行选择。此外,还可以考虑一些在线编程网站,如 HackerRank、L
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。