Echarts动态加载图表数据
之前发表了一篇博客,使用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]}
生成图表如下:
相关推荐
yangkang 2020-11-09
lbyd0 2020-11-17
sushuanglei 2020-11-12
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
wushengyong 2020-10-28
lizhengjava 2020-11-13
星月情缘 2020-11-13
huangxiaoyun00 2020-11-13
luyong0 2020-11-08
腾讯soso团队 2020-11-06
Apsaravod 2020-11-05
PeterChangyb 2020-11-05
gaobudong 2020-11-04
wwwjun 2020-11-02
gyunwh 2020-11-02
EchoYY 2020-10-31
dingyahui 2020-10-30