springboot中怎么动态加载Echart饼状图

springboot中怎么动态加载Echart饼状图，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

尝试一：在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    }]   })  } })});

看完上述内容，你们掌握springboot中怎么动态加载Echart饼状图的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！