之前发表了一篇博客,使用Echart加载静态数据图表。
http://jianzh5.iteye.com/blog/2094543
如何使用动态数据呢?
只需在前篇博文第三步过程中自定义一个函数:
function(ec) {
//数据时间查询参数
var time = $('#MonthCombo').val();
//数据生成路径
var url = '${pageContext.request.contextPath}/back/statistics/getUserCharts.do';
//图表容器div
var elem = "userCharts";
//自定义加载图表函数 echartsConfig.js
EconfigAPI(url,time,elem);
}
自定义函数 EconfigAPI
/**
* 构建动态图表
* @param url 获取后台数据地址
* @param time 图表查询时间
* @param elem 加载容器
*/
function EconfigAPI(url,time,elem){
$.ajaxSettings.async = false; //同步才能获取数据
$.post(url,{time:time},function(response) {
totalListc = response.totalListc;
totalListd = response.totalListd;
newList = response.newList;
timeList = response.timeList;
}, "json");
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
function(ec)
{
//--- 折柱 ---
var myChart = ec.init(document.getElementById(elem));
myChart.setOption({
grid:{
x:40,
y:35,
x2:20,
y2:40
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['流水访问量','流水访问量(去重)','新用户']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar','stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data:timeList
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'流水访问量',
type:'bar',
data:totalListc
},
{
name:'流水访问量(去重)',
type:'bar',
data:totalListd
},
{
name:'新用户',
type:'line',
data:newList
}
]
});
});
}
只要后台能生成相应数据并成功返回即可正常生成图表:
当前项目返回的数据格式如下(仅供参考:)
{"newList":[10,15,25,40,1,2,3],"timeList":["2014-07-01","2014-07-02","2014-07-03","2014-07-04","2014-07-15","2014-07-17","2014-07-21"],"totalListc":[25,40,100,110,5,5,203],"totalListd":[10,20,80,100,1,2,3]}
生成图表如下: