效果展示
前端代码
需注意：需要连接网络才可以使用,因为引入的echarst和vue和jquery都是访问网上的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<!-- 引入 vue -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 引入 jquery -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var vm=new Vue({
el:"#main",
data:{
dat:[
{value:235,name:"马化腾"},
{value:759,name:"马云"},
]
},
methods:{ //自定义方法
getPie:function(){
$.get("http://localhost:8081/jeefast-rest/tb/school/getPie",{},function(data){ //通过ajax访问后端数据,进行交互
//alert(JSON.stringify(data));
var data=data.data; //定义data变量,把后端的数据赋给data
var len=data.length;
vm.dat=[]; //清空dat数值的数据,保证数据的准确性
for(var i=0;i<len;i++){ //for循环遍历数据
var info={};
//后端的字段也要变为value:---,name:---
info.name=data[i].name;
info.value=data[i].type;
vm.dat.push(info); //循环的数据一值追加到vm.dat数组里面
}
//alert(JSON.stringify(vm.dat));
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series : [
{
name: '访问来源',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data:vm.dat // 数据数组，name 为数据项名称，value 为数据项值
}
]
})
})
}
},
mounted(){
this.getPie(); //自调用getPie()函数
this.timer=setInterval(this.getPie,5000); //每秒进行表格数据的更新
}
});
</script>
</body>
</html>
后端
@AuthIgnore
@GetMapping("getPie")
public R getPie() {
Long[] longs= {184L,185L,186L,187L,188L};//柱状图对应的id为184到188,定义一个Long型数组
List<Long> list=new ArrayList<Long>();
for (int i = 0; i < longs.length; i++) {//循环long数组里面的数据
list.add(longs[i]); //使用list集合存储
}
List<TbSchool> data=tbSchoolService.selectBatchIds(list);
return R.ok().put("data",data);
}
