Echarts異步獲取數據,刷新實例

function orgEcharts(){
	var echartsData = [["年份"],["新訓"],["複訓"]];
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var app = {};
	$.ajax({
		url:'list/data.do',
		data:{
			trainingunitId :$('#tree').val()
		},
		type:'post',
		dataType:'json',
		success:function(data){
			for(var i=0;i<data.length;i++){
				echartsData[0].push(data[i].year);
				echartsData[1].push(data[i].registerCount);
				echartsData[2].push(data[i].driverRegisterCount);
			}
			option = null;
			option = {
				legend : {},
				tooltip : {},
				dataset : {
					source : echartsData
				},
				
				xAxis : [ {
					type : 'category',
					gridIndex : 0
				}, {
					type : 'category',
					gridIndex : 1
				} ],
				yAxis : [ {
					gridIndex : 0
				}, {
					gridIndex : 1
				} ],
				grid : [ {
					bottom : '55%'
				}, {
					top : '55%'
				} ],
				series : [
				// These series are in the first grid.
				{
					type : 'bar',
					seriesLayoutBy : 'row'
				}, {
					type : 'bar',
					seriesLayoutBy : 'row'
				}, 
				// These series are in the second grid.
				{
					type : 'bar',
					xAxisIndex : 1,
					yAxisIndex : 1
				}, {
					type : 'bar',
					xAxisIndex : 1,
					yAxisIndex : 1
				}, {
					type : 'bar',
					xAxisIndex : 1,
					yAxisIndex : 1
				} ],
				label : {
					show : true,
					position : 'top'
				}
			};
			;
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		}
		
	});
}

先設置了一個數組 echartsData,ajax請求吧數據導入到數據,而後賦值給dataset.source,實現數據賦予 運行orgEcharts()方法,從新請求數據,若是數據改變,就刷新圖像javascript

相關文章
相關標籤/搜索