spring boot动态加载Echart饼状图

本文实例为大家分享了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
        }]
      })
    }
  })
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。