spring boot动态加载Echart饼状图

 更新时间:2019年12月18日 15:36:57   作者:Amustrming  
这篇文章主要为大家详细介绍了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
    }]
   })
  }
 })
});

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

相关文章

  • Java使用FFmpeg处理视频文件的方法教程

    Java使用FFmpeg处理视频文件的方法教程

    这篇文章主要给大家介绍了关于Java使用FFmpeg处理视频文件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • java可变参数当做数组处理的方法示例

    java可变参数当做数组处理的方法示例

    这篇文章主要介绍了java可变参数当做数组处理的方法,结合实例形式分析了java可变参数当做数组处理相关原理、步骤与操作注意事项,需要的朋友可以参考下
    2019-09-09
  • SpringBoot引入Redis报Redis command timed out两种异常情况

    SpringBoot引入Redis报Redis command timed out两种异常情况

    这篇文章主要给大家介绍了关于SpringBoot引入Redis报Redis command timed out两种异常情况的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • SpringBoot+mybatis实现多数据源支持操作

    SpringBoot+mybatis实现多数据源支持操作

    这篇文章主要介绍了SpringBoot+mybatis实现多数据源支持操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Java使用DFA算法实现过滤多家公司自定义敏感字功能详解

    Java使用DFA算法实现过滤多家公司自定义敏感字功能详解

    这篇文章主要介绍了Java使用DFA算法实现过滤多家公司自定义敏感字功能,结合实例形式分析了DFA算法的实现原理及过滤敏感字的相关操作技巧,需要的朋友可以参考下
    2017-08-08
  • 解决Java字符串JSON转换异常:cn.hutool.json.JSONException: Mismatched hr and body

    解决Java字符串JSON转换异常:cn.hutool.json.JSONException: Mismatched 

    这篇文章主要给大家介绍了关于如何解决Java字符串JSON转换异常:cn.hutool.json.JSONException: Mismatched hr and body的相关资料,文中将解决的办法通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • SpringBoot连接MySql数据库的原理及代码示例

    SpringBoot连接MySql数据库的原理及代码示例

    SpringBoot是一款流行的Java开发框架,它可以轻松地连接各种类型的数据库,包括关系型数据库和非关系型数据库,本文将介绍SpringBoot是如何连接数据库的,包括其原理和代码示例,需要的朋友可以参考下
    2023-07-07
  • springboot配置加密的正确姿势分享

    springboot配置加密的正确姿势分享

    在Spring boot开发中,需要在application.yml文件里配置数据库的连接信息,或者在启动时传入数据库密码,如果不加密,传明文,数据库就直接暴露了,下面这篇文章主要给大家介绍了关于springboot配置加密的正确姿势,需要的朋友可以参考下
    2022-11-11
  • Java获取Class对象的几种方式小结

    Java获取Class对象的几种方式小结

    本文给大家分享了Java获取Class对象的几种方式,使用类名.class 语法,使用对象的 getClass()方法,使用 Class.forName()方法等多种方法,不同的方式适用于不同的场景,需要的朋友可以参考下
    2023-10-10
  • Java集合案例之斗地主游戏

    Java集合案例之斗地主游戏

    这篇文章主要为大家详细介绍了Java集合案例之斗地主游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07

最新评论