mysql有一个成绩表,表中的学生成绩划分为优、良、中、及格、不及格,用集成mybatis-plus的idea显示出基于学生成绩等级的echart直方图和扇形图
时间: 2023-11-18 10:06:17 浏览: 106
首先,需要创建一个成绩表,包含学生姓名和成绩等级两个字段。假设表名为 `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 显示成绩等级分布的示例代码。
阅读全文