效果
前端
需注意：需要连接网络才可以使用,因为引入的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">
var vm=new Vue({
el:"#main",
data:{
name:["中国","美国"],
type:["2","1"]
},
methods:{ //自定义方法
getBarChart:function(){
$.get("http://localhost:8081/jeefast-rest/tb/school/getPie",{},function(data){
//alert(JSON.stringify(data));
var data=data.data;
//alert(JSON.stringify(data));
var len=data.length;
//alert(len);
//vm.name和vm.type数组清空,保证数据准确性
vm.name=[];
vm.type=[];
for(var i=0;i<len;i++){ //for循环遍历出来
//数据库的值分别赋给vm.name和vm.type数组
vm.name.push(data[i].name);
vm.type.push(data[i].type);
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data:vm.name
//["中国","美国","日本","韩国","巴基斯坦"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data:vm.type
//["4","2","3","4","5"]
}]
});
})
},
},
mounted(){
this.getBarChart();
this.tiemr=setInterval(this.getBarChart,10000);
}
});
</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);
}
