Spring Boot如何实现动态加载Echart饼图功能？

本文共计1096个文字，预计阅读时间需要5分钟。

本例展示了如何在大家族分享的Spring Boot项目中集成动态加载ECharts饼状图的代码示例。以下为简化后的内容：

在Spring Boot项目中，我们可以通过以下步骤实现动态加载ECharts饼状图：

1. 下载所需的ECharts版本 - 访问ECharts官网下载所需版本的ECharts库。

2. 在页面中引入ECharts - 使用script标签在页面中引入下载的ECharts库。

3. 创建ECharts实例并设置配置 - 在Vue或React等前端框架中，根据需要创建ECharts实例并设置饼状图的配置。

示例代码如下：

javascript// 引入ECharts主模块var echarts=require('echarts/lib/echarts');// 引入饼图require('echarts/lib/chart/pie');

// 基于准备好的dom，初始化echarts实例var myChart=echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据var option={ title: { text: '饼状图示例' }, tooltip: {}, legend: { data:['访问来源'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', data:[ {value:235, name:'视频广告'}, {value:274, name:'联盟广告'}, {value:310, name:'邮件营销'}, {value:335, name:'直接访问'}, {value:400, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ]};

// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);

以上代码为ECharts饼状图的简单实现，可根据实际需求进行修改和扩展。

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

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