spring boot动态加载Echart饼状图
本文实例为大家分享了springboot动态加载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实体
publicclassEchartData{
privateStringname;
privateFloatvalue;
publicEchartData(){}
publicEchartData(Stringname,Floatvalue){
this.value=value;
this.name=name;
}
publicStringgetName(){
returnname;
}
publicvoidsetName(Stringname){
this.name=name;
}
publicFloatgetValue(){
returnvalue;
}
publicvoidsetValue(Floatvalue){
this.value=value;
}
}
2.后台查询出数据并放入EchartData的list并转化为json数组返回到ajax
@RequestMapping("/dwcb")
@ResponseBody
privateStringdwcb(@RequestParam("scrq1")Stringscrq1,@RequestParam("scrq2")Stringscrq2,
@RequestParam("dwmc")Stringdwmc,Mapmap)throwsParseException{
Listlis=newArrayList();
Listlist=rcbService.findSearchRcb(scrq1,scrq2,dwmc);
//查询出所有的单位信息
Floattotal=Float.valueOf(0);
FloatF01=Float.valueOf(0);
FloatF02=Float.valueOf(0);
FloatF03=Float.valueOf(0);
FloatF04=Float.valueOf(0);
FloatF05=Float.valueOf(0);
FloatF06=Float.valueOf(0);
FloatF07=Float.valueOf(0);
for(ViewNyRxhmxitem: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());
}
}
EchartDataechartData1=newEchartData("第一备煤分厂",F01);
EchartDataechartData2=newEchartData("第二备煤分厂",F02);
EchartDataechartData3=newEchartData("第一炼焦分厂",F03);
EchartDataechartData4=newEchartData("第二炼焦分厂",F04);
EchartDataechartData5=newEchartData("第三炼焦分厂",F05);
EchartDataechartData6=newEchartData("能源分厂",F06);
EchartDataechartData7=newEchartData("综合保障分厂",F07);
lis.add(echartData1);
lis.add(echartData2);
lis.add(echartData3);
lis.add(echartData4);
lis.add(echartData5);
lis.add(echartData6);
lis.add(echartData7);
Stringdata=JSON.toJSONString(lis);
System.out.println("data:"+data);
returndata;
}
3.加载饼状图的series中的data直接使用ajax返回的data即可
$(function(){
//基于准备好的dom，初始化echarts图表
varpie_data=echarts.init(document.getElementById('pie_data'));
//显示加载动画
pie_data.showLoading();
varscrq1=document.getElementById('scrq1').value;
varscrq2=document.getElementById('scrq2').value;
vardwmc=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("单位名称总成本 "+res['name']+""+res['value']+"
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。