Echartsグラフデータの動的ロード

以前、Echartを使用して静的データグラフをロードするブログを発表しました.
http://jianzh5.iteye.com/blog/2094543
動的データの使用方法
前のブログの手順3で関数をカスタマイズするだけです.
 

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

 
グラフは次のように生成されます.