場景

SpringBoot+Echarts實(shí)現(xiàn)請(qǐng)求后臺(tái)數(shù)據(jù)顯示餅狀圖：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/89921101

實(shí)現(xiàn)

在上面實(shí)現(xiàn)一次ajax請(qǐng)求數(shù)據(jù)返回并顯示一個(gè)餅狀圖的基礎(chǔ)上。

html頁面修改

<script src=" href='https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js">https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script> <!-- 為 ECharts 準(zhǔn)備一個(gè)具備大小（寬高）的 DOM --> <table><tr><td><div id="main1" style="width: 600px;height:400px;border:1px dashed #000;"></div></td><td>&nbsp;&nbsp;&nbsp;&nbsp;</td><td><div id="main2" style="width: 600px;height:400px;border:1px dashed #000;"></div></td></tr><tr><br/></tr><tr><td><div id="main3" style="width: 600px;height:400px;border:1px dashed #000;"></div></td><td>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> <div id="main4" style="width: 600px;height:400px;border:1px dashed #000;"></div></td></tr> </table>

后臺(tái)Controller修改

@Description("獲取Echarts數(shù)據(jù)")@RequestMapping("/EcharsShow")@ResponseBodypublic Map<String,List<Echarts>> echartsShow(Model model) {Map<String,List<Echarts>> map = new HashMap<>();List<Echarts> list1 = new ArrayList<Echarts>();list1.add(new Echarts("正極車間",100));list1.add(new Echarts("負(fù)極車間",200));list1.add(new Echarts("立體倉庫",300));list1.add(new Echarts("清潔車間",400));List<Echarts> list2 = new ArrayList<Echarts>();list2.add(new Echarts("正極車間",100));list2.add(new Echarts("負(fù)極車間",200));list2.add(new Echarts("立體倉庫",300));list2.add(new Echarts("清潔車間",400));List<Echarts> list3 = new ArrayList<Echarts>();list3.add(new Echarts("正極車間",100));list3.add(new Echarts("負(fù)極車間",200));list3.add(new Echarts("立體倉庫",300));list3.add(new Echarts("清潔車間",400));List<Echarts> list4 = new ArrayList<Echarts>();list4.add(new Echarts("正極車間",100));list4.add(new Echarts("負(fù)極車間",200));list4.add(new Echarts("立體倉庫",300));list4.add(new Echarts("清潔車間",400));map.put("list1",list1);map.put("list2",list2);map.put("list3",list3);map.put("list4",list4);return map;}

js代碼修改

$(document).ready(function() {// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart1 = echarts.init(document.getElementById('main1'));var myChart2 = echarts.init(document.getElementById('main2'));var myChart3 = echarts.init(document.getElementById('main3'));var myChart4 = echarts.init(document.getElementById('main4'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var names1=[];var values1=[];var names2=[];var values2=[];var names3=[];var values3=[];var names4=[];var values4=[];//數(shù)據(jù)加載完之前先顯示一段簡單的loading動(dòng)畫myChart1.showLoading();myChart2.showLoading();myChart3.showLoading();myChart4.showLoading();$.ajax({type : "post",async : true,??????????? //異步請(qǐng)求（同步請(qǐng)求將會(huì)鎖住瀏覽器，用戶其他操作必須等待請(qǐng)求完成才可以執(zhí)行）url : "/wmsLogisticMonitoring/EcharsShow",??? //請(qǐng)求發(fā)送到dataActiont處data : {},dataType : "json",??????? //返回?cái)?shù)據(jù)形式為jsonsuccess : function(result) {//請(qǐng)求成功時(shí)執(zhí)行該函數(shù)內(nèi)容，result即為服務(wù)器返回的json對(duì)象if (result) {var list1 = result["list1"]var list2 = result["list2"]var list3 = result["list3"]var list4 = result["list4"]for(var i=0;i<list1.length;i++){names1.push(list1[i].name);values1.push(list1[i].num);}for(var i=0;i<list2.length;i++){names2.push(list2[i].name);values2.push(list2[i].num);}for(var i=0;i<list3.length;i++){names3.push(list3[i].name);values3.push(list3[i].num);}for(var i=0;i<list4.length;i++){names4.push(list4[i].name);values4.push(list4[i].num);}myChart1.hideLoading();??? //隱藏加載動(dòng)畫myChart1.setOption({title: {text: '物料運(yùn)輸件數(shù)',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} (ze8trgl8bvbq%)"},legend: {orient: 'vertical',left: 'left',data: names1},series: [{name: '物料來源',type: 'pie',radius: '55%',center: ['50%', '60%'],data: list1,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});myChart2.hideLoading();??? //隱藏加載動(dòng)畫myChart2.setOption({title: {text: '物流單執(zhí)行時(shí)長',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} (ze8trgl8bvbq%)"},legend: {orient: 'vertical',left: 'left',data: names2},series: [{name: '物料來源',type: 'pie',radius: '55%',center: ['50%', '60%'],data: list2,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});myChart3.hideLoading();??? //隱藏加載動(dòng)畫myChart3.setOption({title: {text: '物流隊(duì)列',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} (ze8trgl8bvbq%)"},legend: {orient: 'vertical',left: 'left',data: names3},series: [{name: '物料來源',type: 'pie',radius: '55%',center: ['50%', '60%'],data: list3,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});myChart4.hideLoading();??? //隱藏加載動(dòng)畫myChart4.setOption({title: {text: '隊(duì)列等待時(shí)長',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} (ze8trgl8bvbq%)"},legend: {orient: 'vertical',left: 'left',data: names4},series: [{name: '物料來源',type: 'pie',radius: '55%',center: ['50%', '60%'],data: list4,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});}},error : function(errorMsg) {//請(qǐng)求失敗時(shí)執(zhí)行該函數(shù)alert("圖表請(qǐng)求數(shù)據(jù)失敗!");myChart.hideLoading();}});//end ajax});//刷新方法結(jié)束

效果

?

?

?

總結(jié)

以上是生活随笔為你收集整理的SpringBoot+Echarts实现一次ajax请求返回并显示多个饼状图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。