本文例項為大家分享了spring boot動態載入Echart餅狀圖的具體程式碼，供大家參考，具體內容如下

先從Echart官網上根據需要下載所需Echart版本，在頁面中用script標籤引入，這些在Echart官網上有教程。官網上有非同步載入和更新Echart圖，知道了是動態把查詢到的結果按格式拼接到餅狀圖series裡面的data中。

嘗試一：在springboot的controller中把查詢到的結果拼接好放在map裡，跳轉到頁面，然後在前臺javascript中獲取完成動態載入，發現餅狀圖中data是陣列型別，後臺拼接的String型別傳到javascript中，然後在頁面中顯示會出現單引號解析錯誤。

嘗試二：使用ajax，後臺跳轉到頁面後自動執行ajax查詢出餅狀圖所需的data資料，返回json格式資料

1.餅狀圖的data資料格式為[{value:235,name:'視訊廣告'},{value:274,name:'聯盟廣告'},{value:310,name:'郵件營銷'}]

構造data實體

public class EchartData {
 private String name;
 private Float value;

 public EchartData(){}
 public EchartData(String name,Float value){
  this.value = value;
  this.name = name;
 }
 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public Float getValue() {
  return value;
 }

 public void setValue(Float value) {
  this.value = value;
 }
}

2.後臺查詢出資料並放入EchartData的list並轉化為json陣列返回到ajax

@RequestMapping("/dwcb")
 @ResponseBody
 private String dwcb(@RequestParam("scrq1") String scrq1,@RequestParam("scrq2") String scrq2,@RequestParam("dwmc") String dwmc,Map map) throws ParseException {
  List lis = new ArrayList();
  List<ViewNyRxhmx> list = rcbService.findSearchRcb(scrq1,scrq2,dwmc);
  //查詢出所有的單位資訊
  Float total = Float.valueOf(0);
  Float F01 = Float.valueOf(0);
  Float F02 = Float.valueOf(0);
  Float F03 = Float.valueOf(0);
  Float F04 = Float.valueOf(0);
  Float F05 = Float.valueOf(0);
  Float F06 = Float.valueOf(0);
  Float F07 = Float.valueOf(0);
  for(ViewNyRxhmx item : list){
   
   if(item.getDwdm().equals("F01") && item.getRcb()!=null){
    F01 += Float.valueOf(item.getRcb());
   }
   if(item.getDwdm().equals("F02") && item.getRcb()!=null){
    F02 += Float.valueOf(item.getRcb());
   }
   if(item.getDwdm().equals("F03") && item.getRcb()!=null){
    F03 += Float.valueOf(item.getRcb());
   }
   if(item.getDwdm().equals("F04") && item.getRcb()!=null){
    F04 += Float.valueOf(item.getRcb());
   }
   if(item.getDwdm().equals("F05") && item.getRcb()!=null){
    F05 += Float.valueOf(item.getRcb());
   }
   if(item.getDwdm().equals("F06") && item.getRcb()!=null){
    F06 += Float.valueOf(item.getRcb());
   }
   if(item.getDwdm().equals("F07") && item.getRcb()!=null){
    F07 += Float.valueOf(item.getRcb());
   }
  }

  EchartData echartData1 = new EchartData("第一備煤分廠",F01);
  EchartData echartData2 = new EchartData("第二備煤分廠",F02);
  EchartData echartData3 = new EchartData("第一煉焦分廠",F03);
  EchartData echartData4 = new EchartData("第二煉焦分廠",F04);
  EchartData echartData5 = new EchartData("第三煉焦分廠",F05);
  EchartData echartData6 = new EchartData("能源分廠",F06);
  EchartData echartData7 = new EchartData("綜合保障分廠",F07);

  lis.add(echartData1);
  lis.add(echartData2);
  lis.add(echartData3);
  lis.add(echartData4);
  lis.add(echartData5);
  lis.add(echartData6);
  lis.add(echartData7);
  String data = JSON.toJSONString(lis);
  System.out.println("data:"+data);

  return data;
 }

3.載入餅狀圖的series中的data直接使用ajax返回的data即可

 $(function () {
 // 基於準備好的dom，初始化echarts圖表
 var pie_data = echarts.init(document.getElementById('pie_data'));
 //顯示載入動畫
 pie_data.showLoading();
 var scrq1 = document.getElementById('scrq1').value;
 var scrq2 = document.getElementById('scrq2').value;
 var dwmc = document.getElementById('dwmc').value;
 $.ajax({
  type:"POST",cache:false,url:"/dwcb",data:{"scrq1": scrq1,"scrq2": scrq2,"dwmc": dwmc},dataType: "json",success:function (result) {
   $('#mytable').html("<thead><tr><th align='center'>單位名稱</th><th align='center'>總成本</th></tr></thead>");

   <!--向表中填寫資料-->
   var item;
   $.each(result,function(i,res){
    item = "<tr><td align='center'>"+res['name']+"</td><td align='center'>"+res['value']+"</td></tr>";

    $('#mytable').append(item);
   });
   // $("#mytable").table("refresh");
   //隱藏載入動畫
   pie_data.hideLoading();
   pie_data.setOption({
    tooltip : {
     formatter: "{b} : {c} ({d}%)"
    },series: [{
     // 根據名字對應到相應的系列
     name: '訪問來源',type: 'pie',radius: '55%',data: result
    }]
   })
  }
 })
});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。