echarts图表动态获取后台数据详解（一）

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

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

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

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

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

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

会经常遇到这种情况，

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

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页面在什么位置，就相对应的设置这个路径。

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

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

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

最终我的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的动态获取后台数据的第一步，就算完成。后面我会继续编写第二步，也是最重要的一步。敬请关注！