echarts图表动态获取后台数据详解(二)

2017-12-21 19:46:25来源:CSDN作者:zfb52572人点击

分享
第七城市th7cn
前篇文章介绍了如何在现有的页面中,建立容器存放echarts图表,如何引入echarts.js文件,和配置图表库的路径。并将静态数据在页面上呈现出来。相当于是为动态获取后台数据做了铺垫。那么这篇文章,就实际的介绍一下,怎么从后台数据库获取数据,并展示在echarts图表上。
1.在前一篇文章介绍中的xxx.js文件里,加入ajax请求,dataType为json。

2.然后再ajax的success返回函数中,设置echarts图表的各种属性,这些属性当中,除了legend的data的值、series的data
值需要从后台数据库获取意外,其他的都是echarts官方的数据格式。直接复制粘贴即可。



3.  java后台比较简单,后台的sql语句和service这里就不赘述了,相信这些大家都没问题。这里介绍一下在action前端控制器中
怎么返回echarts想要的数据格式。echarts的数据格式在官网的例子中不难看出,option里面的legend下面的data,数据格式是一个
数组[],series里面的data是一个数组中包含的键值对(key,value)。那么我们在后台就必须将数据封装成键值对的形式,再转换
成json数据格式,返回给前台。

下图是echarts官方的series中的data数据格式:

4.有了前台需要的数据格式,后台就好办了。先封装一个class类,类的属性为name和value,目的是将数据封装好,返回给series

的data使用。因为series的数据格式必须要是key,value键值对的形式。


5.建一个action,建一个方法,对应前台ajax请求路径。将从数据库获取的数据封装成List集合。然后转换成json格式,这里我

用到的是阿里巴巴的fastjson(自行百度)。然后传给前台。直接上源码:

@Controller@RequestMapping(value="/population")public class Population_big {    @Autowired    private PopulationBo populationBo;

@RequestMapping(value="/populationCount")    @ResponseBody    public String populationCount(HttpServletRequest request, HttpServletResponse response) {                List list = new ArrayList();        List<String> popSexList = this.populationBo.getAllPopulation();        System.out.println("popSexList:"+popSexList);        for(int i=0;i<popSexList.size();i++){            Integer countSex = this.populationBo.countPopByPopSex(popSexList.get(i));            Pop_bigData pop_bigData = new Pop_bigData(countSex,popSexList.get(i));            list.add(pop_bigData);        }        String data = JSON.toJSONString(list);        System.out.println("data:"+data);        return data;    }
解释:requestMapping路径,对应ajax的请求路径,ajax请求中,有请求参数请自行加入,我这里没有请求参数。建List集合,将

数据封装进去,popSexList对应前台页面中ecahrts的legend里的data数据格式。pop_bigData是我封装的key,value键值对的一个类

(前面已经说到),将从数据库中获取的name值,value值,添加到pop_bigData这个对象中。然后也封装到一个List集合中。最后,

将这个list对象转换成json格式,返回给前台。

下图是封装好的数据,转换成为了json格式之后,前台就能使用了:



6.前台页面在获取到后台传过来的数据之后,就能使用了。在success的回调函数中,将数据直接展示在echarts的option中的

legend下的data,和series下的data中。直接使用~~方便快捷。。见代码(干货):

 $.ajax({                url:'population/populationCount.do?'+(new Date()).getTime(),                type:'post',                async: true,                dataType:'json',                success:function (result) {                    pie_data.hideLoading();//隐藏加载动画                    pie_data.setOption({                        tooltip : {                            trigger: 'item',                            formatter: "{a} <br/>{b} : {c} ({d}%)"                        },                        legend: {                            orient : 'vertical',                            x : 'left',                            // data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']                            data:result                        },                        toolbox: {                            show : true,                            feature : {                                mark : {show: true},                                dataView : {show: true, readOnly: false},                                magicType : {                                    show: true,                                    type: ['pie', 'funnel'],                                    option: {                                        funnel: {                                            x: '25%',                                            width: '50%',                                            funnelAlign: 'left',                                            max: 1548                                        }                                    }                                },                                restore : {show: true},                                saveAsImage : {show: true}                            }                        },                        calculable : true,                        series : [                            {                                name:'访问来源',                                type:'pie',                                radius : '55%',                                center: ['50%', '60%'],                                data:result                            }                        ]                    });                },

到这里为止,从后台数据库动态获取数据就算成功了,下面是展示图,请对比控制台打印的那张图看数据对不对:


PS:这里介绍的是在同一个项目下,ajax请求,动态的从后台获取数据并展示的情况。后面我将继续介绍:ajax请求,在跨域的

情况下,动态的获取后台数据。即:ajax请求跨域情况如何解决。敬请关注!


第七城市th7cn

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台