众所周知，ecahrts官网只给出了一个demo，所有的数据都是静态的。那么，要想从后台数据库动态的将数据返回到前台，展示到各个图表上，我这里说一下自己的体会，这篇文章是建立静态数据的，相当于的动态获取后台数据的前站，此处是动态获取后台数据的链接（echarts图表动态获取后台数据详解二）。
1.首先，建一个页面，html也好，jsp也好，或者直接在你现成的页面上都可以，只要给这个图表建立一个容器（粗俗点就是建个div）存放图表。--此处echarts的官网有教程提示。例：<div id="bar_div" style="width:800px;height:300px;"></div>,建个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文件<script type="text/javascript" src="js/test.js"></script>
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} <br/>{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的动态获取后台数据的第一步，就算完成。后面我会继续编写第二步，也是最重要的一步。敬请关注！