我使用ssm框架,如何简单的画出一个可视化学生成绩分析的饼图
时间: 2024-02-11 12:05:24 浏览: 84
学生作业管理系统,SSM框架,使用了spring,springmvc,mybatis等,还有poi操作excel批量导入,饼状图
5星 · 资源好评率100%
首先,你需要在前端页面引入echarts插件,然后在后端Controller中编写代码来获取学生成绩数据。
以下是一个简单的示例:
1.在前端页面引入echarts插件
```html
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
```
2.在Controller中编写代码获取学生成绩数据
```java
@RequestMapping("/getScoreData")
@ResponseBody
public List<Score> getScoreData() {
// 从数据库中获取学生成绩数据
List<Score> scoreList = scoreService.getScoreData();
return scoreList;
}
```
3.编写前端代码生成饼图
```javascript
// 获取学生成绩数据
$.ajax({
type: "GET",
url: "/getScoreData",
success: function(scoreList) {
// 使用echarts生成饼图
var chart = echarts.init(document.getElementById('chart'));
var option = {
title : {
text: '学生成绩分析',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['优秀', '良好', '及格', '不及格']
},
series : [
{
name: '成绩',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:scoreList.excellentCount, name:'优秀'},
{value:scoreList.goodCount, name:'良好'},
{value:scoreList.passCount, name:'及格'},
{value:scoreList.failCount, name:'不及格'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chart.setOption(option);
}
});
```
注意:上面的示例代码中,Score类需要根据你的实际情况进行定义,scoreList.excellentCount、scoreList.goodCount、scoreList.passCount、scoreList.failCount需要改为你获取学生成绩数据后的字段名。
阅读全文