饼图
javascript
//初始化echarts
var pieCharts = echarts.init(document.getElementById("pie"));
//显示一段动画
pieCharts.showLoading();
//异步请求数据
$.ajax({
type: "post",
async: true,
url: '${pageContext.request.contextPath}/teacher/getData',
data: [],
dataType: "json",
success: function (data) {
console.log(data)
pieCharts.hideLoading();//隐藏加载动画
pieCharts.setOption({
title: {
text: '学生及格率',
subtext: '及格率',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: []
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
series: [
{
name: '成绩',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: data
}
]
});
}
})
需要在页面添加一个盒子
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="pie" style="width: 500px;height: 300px;"></div>
controller
@RequestMapping("/getData")
@ResponseBody
public List<scoreResult> getData() {
int pass = service.getStudentPass().size();
int nopass = service.getStudentNoPass().size();
List<scoreResult> results = new ArrayList<>();
scoreResult resultpass = new scoreResult(pass,"及格");
scoreResult resultnopass = new scoreResult(nopass,"不及格");
results.add(resultpass);
results.add(resultnopass);
System.out.println("json数据:"+results);
return results;
}
@RequestMapping("/getData")
@ResponseBody
public List<scoreResult> getData() {
List<Grade> grades = service.getAllStudentScore();
List<scoreResult> results = new ArrayList<>();
for (Grade grade : grades) {
// 把学生的成绩和姓名封装到一个result
scoreResult result = new scoreResult(grade.getScore().intValue(), grade.getSubject());
results.add(result);
System.out.println(result);
}
return results;
}
service
/**
* 查询所有学生的成绩信息列表
* @return
*/
public List<Grade> getAllStudentScore(){
List<Grade> gradeList = gradeMapper.selectByExample(null);
return gradeList;
}
public List<Grade> getStudentPass(){
GradeExample example = new GradeExample();
example.createCriteria().andPassEqualTo("及格");
List<Grade> gradePasslist = gradeMapper.selectByExample(example);
return gradePasslist;
}
public List<Grade> getStudentNoPass(){
GradeExample example = new GradeExample();
example.createCriteria().andPassEqualTo("不及格");
List<Grade> gradeNoPasslist = gradeMapper.selectByExample(example);
return gradeNoPasslist;
}
实体类省略get和set
public Integer value;
public String name;
效果
柱状图
javascript
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var subject = [];//科目数组(实际用来盛放X轴坐标值)
var score = [];//成绩数组(实际用来盛放Y坐标值)
$.get('${pageContext.request.contextPath}/parent/queryGrade').done(function (data) {
for (var i = 0; i < data.length; i++) {
subject.push(data[i].name);
score.push(data[i].value);
}
// 指定图表的配置项和数据
var option = {
title: {
text: '成绩统计图'
},
tooltip: {},
legend: {
data: ['成绩']
},
xAxis: {
data: subject
},
yAxis: {},
series: [{
name: '成绩',
type: 'bar',
data: score
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
用来显示的盒子
<div class="am-center" id="main" style="width: 600px;height:400px;"></div>
Controller
@RequestMapping("/queryGrade")
@ResponseBody
public List<scoreResult> queryGrade(){
/*String studentname = service.queryStudentByParentName(parentename).get(0).getStudentname();*/
String studentname = "李尔";
List<Grade> gradeList = service.queryGrade(studentname);
List<scoreResult> scoreResults = new ArrayList<>();
for (Grade grade: gradeList){
scoreResult result = new scoreResult(Integer.parseInt(String.valueOf(grade.getScore())),
grade.getSubject());
scoreResults.add(result);
}
System.out.println("json:"+scoreResults);
return scoreResults;
}
service
/**
* 根据学生姓名查询学生成绩
* @param studentname
* @return 返回查询结果集
*/
public List<Grade> queryGrade(String studentname){
GradeExample example = new GradeExample();
example.createCriteria().andStudentnameEqualTo(studentname);
List<Grade> gradeList = gradeMapper.selectByExample(example);
return gradeList;
}
实现效果