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]}

 

生成图表如下：

 

 

 

 

 

 

评论

3 楼 单一色调 2014-10-21  

weihaixia 写道

博主，请问
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); 
} 
这个写在什么地方，是在<script></script>里吗?我这报错，并且也不明白怎么body页面怎么调用，看到请回邮件[e-mail],谢谢

、


不好意思，之前有事一直没看论坛。
已经发了，不知道对你还有没有用。。

2 楼 weihaixia 2014-10-14  

博主，请问
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); 
} 
这个写在什么地方，是在<script></script>里吗?我这报错，并且也不明白怎么body页面怎么调用，看到请回邮件[e-mail],谢谢

1 楼 Yeqisu 2014-09-17  

博主有没有具体的demo例子,求发一份，[e-mail]