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