spring boot动态加载Echart饼状图

网友投稿 272 2022-12-18


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 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("单位名称总成本");

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

}]

})

}

})

});


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:学会IDEA REST Client后就可以丢掉postman了
下一篇:基于Java实现ssh命令登录主机执行shell命令过程解析
相关文章

 发表评论

暂时没有评论,来抢沙发吧~