場景

SpringBoot+Echarts實現請求后臺數據顯示餅狀圖：

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

實現

在上面實現一次ajax請求數據返回并顯示一個餅狀圖的基礎上。

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 準備一個具備大小（寬高）的 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>

后臺Controller修改

@Description("獲取Echarts數據")@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("負極車間",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("負極車間",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("負極車間",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("負極車間",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() {// 基于準備好的dom，初始化echarts實例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'));// 指定圖表的配置項和數據var names1=[];var values1=[];var names2=[];var values2=[];var names3=[];var values3=[];var names4=[];var values4=[];//數據加載完之前先顯示一段簡單的loading動畫myChart1.showLoading();myChart2.showLoading();myChart3.showLoading();myChart4.showLoading();$.ajax({type : "post",async : true,??????????? //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行）url : "/wmsLogisticMonitoring/EcharsShow",??? //請求發送到dataActiont處data : {},dataType : "json",??????? //返回數據形式為jsonsuccess : function(result) {//請求成功時執行該函數內容，result即為服務器返回的json對象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();??? //隱藏加載動畫myChart1.setOption({title: {text: '物料運輸件數',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/> : {c} (ozvdkddzhkzd%)"},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();??? //隱藏加載動畫myChart2.setOption({title: {text: '物流單執行時長',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/> : {c} (ozvdkddzhkzd%)"},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();??? //隱藏加載動畫myChart3.setOption({title: {text: '物流隊列',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/> : {c} (ozvdkddzhkzd%)"},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();??? //隱藏加載動畫myChart4.setOption({title: {text: '隊列等待時長',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/> : {c} (ozvdkddzhkzd%)"},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) {//請求失敗時執行該函數alert("圖表請求數據失敗!");myChart.hideLoading();}});//end ajax});//刷新方法結束

效果

?

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。