前提用Maven搭好springMVC的框架
1、建一个jsp页面，代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.common.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
</head>
<body>
<div id="chartmain" style="width: 600px;height: 400px"></div>
<script type="text/javascript">
$(function(){
var myCharts=echarts.init(document.getElementById('chartmain'));
myCharts.setOption({
color: ['#3398DB'],
title:{
text:'ECharts 班级成绩平均分'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['成绩']
},
xAxis : {
data : []
},
yAxis : {
},
series : [
{
name:'成绩',
type:'bar',
data:[]
}
]
});
//加载时显示loading动画
myCharts.showLoading();
//放x轴值得数组
var gradeName=[];
//放y轴值得数组
var score=[];
//写ajax给数组存值
$.ajax({
type: "post",
url: "${pageContext.request.contextPath}/getGrade", //请求发送到getStudent处
dataType: "json", //返回数据形式为json
success: function (data) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
$(data).each(function(i,e){
gradeName.push(e.name); //挨个取出班别放数组
score.push(e.score); //挨个取出分数放数组
});
myCharts.hideLoading(); //隐藏加载动画
myCharts.setOption({ //加载数据图表
xAxis: {
data: gradeName
},
series: [{
// 根据名字对应到相应的系列
name: '成绩',
type:'bar',
barWidth: '60%',
data: score,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 12
}
}
}
}
}]
});
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myCharts.hideLoading();
}
})
});
</script>
</body>
</html>
2、controller那边的代码：
@Controller
public class GradeController {
@RequestMapping("/getGrade")
@ResponseBody
public List<Grade> showGradeName(){
List<Grade> list=new ArrayList<Grade>();
list.add(new Grade("一班","89.9"));
list.add(new Grade("二班","90.0"));
list.add(new Grade("三班","67.9"));
list.add(new Grade("四班","89.9"));
list.add(new Grade("五班","70.0"));
list.add(new Grade("六班","67.9"));
return list;
}
}
3、测试结果：