Html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼状图</title>
<link rel="shortcut icon" href="#" />
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var vm =new Vue({
el:'#main',
data:{
dat:[
{value:235,name:'视频广告'},
{value:274,name:'联盟广告'}
]
},
mounted() {
this.getData();
this.timer=setInterval(this.getData,2000);
},
methods: {
getData:function(){
$.post('http://localhost:8080/stu/getpieChart',{},function (data) {
var data = data.data;
var len = data.length;
vm.dat=[];
for(var i=0;i<len;i++){
var info={};
info.name=data[i].sname;
info.value=data[i].score[0].grade;
vm.dat.push(info);
}
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data: vm.dat,
}
]
})
});
}
},
})
</script>
</body>
</html>
Controller层
@RequestMapping("/ECharts")
public String pieChart(Model model){
return "demo1";
}
@RequestMapping("getpieChart")
@ResponseBody
public JsonResult getpieChart(){
Integer[] idList = {1,2,3,4,5,6};
List<Integer> sid = new ArrayList<Integer>();
for (int i=0;i<idList.length;i++){
sid.add(idList[i]);
}
List<Student> students = studentDao.findAllById(sid);
return new JsonResult<>(students,"获取列表成功");
}
}