效果圖：
後端controller代碼：
//圖表
@AuthIgnore
@PostMapping("getData")
public R getData() {
long[] idList= {3L,4L,5L,6L,7L};
List<Long> id=new ArrayList<Long>();
for (int i = 0; i < idList.length; i++) {
id.add(idList[i]);
}
List<TbUser> userList=userService.selectBatchIds(id);
return R.ok().put("data",userList);
}
注意：上面代碼中的 3L,4L,5L,6L,7L，對應的是數據庫中的ID
HTML代碼：
這裏引用的都是本地下載好的包
還可以引用網上的
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個 ECharts 實例</title>
<!-- 引入 echarts.js -->
<!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -->
<script src="../../libs/echarts.min.js"></script>
<script src="../../libs/jquery.min.js"></script>
<script src="../../libs/vue.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
//Vue
var vm=new Vue({
el:"#main",
data:{
dat:[
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
],
},
methods:{ //自定義方法
getData:function(){
$.post("http://localhost:8081/jeefast-rest/api/getData",{},function(data){
//alert(JSON.stringify(data));
var data=data.data;
var len=data.length;
// alert(len);
vm.dat=[] //先清空
for(var i=0;i<len;i++){
var info={};
info.name=data[i].username;
info.value=data[i].mobile;
vm.dat.push(info); //把info裏面的數據追加到data裏
}
// alert(JSON.stringify(vm.dat));
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series : [
{
name: '訪問來源',
type: 'pie', // 設置圖表類型爲餅圖
radius: '55%', // 餅圖的半徑，外半徑爲可視區尺寸（容器高寬中較小一項）的 55% 長度。
data: vm.dat // 數據數組，name 爲數據項名稱，value 爲數據項值
}
]
})
});
}
},
mounted(){ //自動調用裏面的方法
this.getData();
this.timer = setInterval(this.getData, 3000);//定時器，每3秒執行一次
}
});
</script>
</body>
</html>