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

众所周知,ecahrts官网只给出了一个demo,所有的数据都是静态的。那么,要想从后台数据库动态的将数据返回到前台,展示到各个图表上,我这里说一下自己的体会,这篇文章是建立静态数据的,相当于的动态获取后台数据的前站,此处是动态获取后台数据的链接(echarts图表动态获取后台数据详解二)。

1.首先,建一个页面,html也好,jsp也好,或者直接在你现成的页面上都可以,只要给这个图表建立一个容器(粗俗点就是建个div)存放图表。--此处echarts的官网有教程提示。例:

,建个div标签,设定一个id号(这个id号后面要用,必须设定),同时设置这个div的宽高。

我这里是将图表放在一个JSP页面,页面里用到了bootstrap的格栅系统(col-md-6),然后在格栅系统里添加了panel面板,在panel面板里添加了一个div。这个div用来存放echarts图表。

echarts图表动态获取后台数据详解(一)_第1张图片

大家可以看到,我这个div里面,除了id号和一些宽高样式之外,什么都没有。在这里,我并没有像echarts官网的教程那样,

单独建立一个页面来存放echarts图表,所以我单独写了一个xxx.js文件,引入到了这个JSP文件中。相信在实际的项目中,

会经常遇到这种情况,

2.下载echarts插件,官网下载地址,打开后--点击(下载),我下载的是(xxx.from baidu)。然后将压缩包解压,单纯做项目的话,直接将build文件夹一起(包含build文件夹)复制到项目的资源文件夹下(webapp),不知道什么是资源文件夹的我就无语了。

echarts图表动态获取后台数据详解(一)_第2张图片

echarts图表动态获取后台数据详解(一)_第3张图片

3.将echarts插件导入到项目之后,就要像官网教程提示一样,引入echarts.js文件和图表库。若是单独建立一个全新页面的项目的话,我这里就不叙述了,echarts官网上有教程。我这里介绍一下,外部引入xxx.js文件情况下怎么做:

1).刚才介绍了,在项目的JSP页面下,我使用了div标签建一个容器。设置id号和宽高属性。其他属性也可以自己随意添加。

2).新建一个xxx.js文件,将这个文件引入JSP文件

3).然后打开这个xxx.js文件,将echarts的图表库进入进来(就是官网说的配置路径)。

// 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

这里的路径一定要配置正确,不然图表出不来。上面介绍到建议将build文件夹一起复制到项目中,这里就可以根据build文件夹的路径,找到dist的位置,找到dist的路径就ok了,我们需要的其实是dist文件夹下的chart文件夹,里面存放的才是所有的图表库。注意是相对路径,不要写成绝对路径了。意思就是说:你的JSP页面在什么位置,就相对应的设置这个路径。

echarts图表动态获取后台数据详解(一)_第4张图片

下面是我的JSP页面设置了项目的路径,添加了一个base标签。所以,所有的引用文件,不再需要什么../   ../ “点点杠”之类的了。直接可以根据当前JSP页面所在的位置,填写所有的引入文件路径。见下图:

echarts图表动态获取后台数据详解(一)_第5张图片

这里可以在上面的图片看到,我项目的echarts插件,存放的位置,然后这里路径就填写成这样。所以说,要根据项目的实际情况,填写路径的配置。

echarts图表动态获取后台数据详解(一)_第6张图片

4).最后,将下面图片中的所有配置添加到上面这张图片的下方。

echarts图表动态获取后台数据详解(一)_第7张图片

最终我的js文件中的代码样式是:

$(function () {
    // 路径配置
    require.config({
        paths: {
            echarts: 'B-JUI/plugins/echarts/'
        }
    });
    //动态加载饼状图
    require(
        [
            'echarts',
            'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
        ],
        function (ec) {
            // 基于准备好的dom,初始化echarts图表
            var pie_data = ec.init(document.getElementById('pie_data'));
            var option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} 
{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, 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:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] }; // 为echarts对象加载数据 pie_data.setOption(option); } ) });

效果图如下:

echarts图表动态获取后台数据详解(一)_第8张图片

这样,echarts的动态获取后台数据的第一步,就算完成。后面我会继续编写第二步,也是最重要的一步。敬请关注!

你可能感兴趣的:(大数据,数据库,前端,java后台,echarts)