springboot中怎么动态加载Echart饼状图-创新互联
spring boot中怎么动态加载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(); Listlist = 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(""); var item; $.each(result,function(i,res){ item = " 单位名称 总成本 "; $('#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 }] }) } }) }); "+res['name']+" "+res['value']+"
看完上述内容,你们掌握spring boot中怎么动态加载Echart饼状图的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联网站建设公司行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章题目:springboot中怎么动态加载Echart饼状图-创新互联
文章分享:http://pwwzsj.com/article/dddhsh.html