Echars柱状图异步加载数据以及X轴纵向显示实例

本例子来自乡宁县项目中的大数据分析模块

主要实现了柱状图的异步加载，以及数据过大时纵向显示X轴的文本以及强制全部显示

js部分完整实例

<script type="text/javascript">



jQuery(document).ready(function($) {

	var myDate = new Date();
    var nowYear= myDate.getFullYear();
    var myChart = echarts.init(document.getElementById('dxpt'));

$('lii').click(function(e){   
     var year=$(this).attr('id');//获取要查询的年份
    
     $("li").removeClass("xxbq_change ");//切换样式
     $("#li"+year).addClass("xxbq_change ");     
     selectYears(year);
});



$(function(){
	//追加样式    
    $("#li"+nowYear).addClass("xxbq_change ");
	initfspt();	
});

//初始化图表
function initfspt(){	
// 显示标题，图例和空的坐标轴
		myChart.setOption({
		    title: {
		        text: '各项措施帮扶数量／户'
		    },
		    tooltip: {},
		    legend: {
		        data:['帮助数量']
		    },
		    grid: {
	            top: 80,
				right:100,
				bottom:70
	        },
		    xAxis: {
		  		data: [],
		    	axisLabel:{
		    	//rotate:60, //刻度旋转45度角
		    	interval:0,//强制全部显示
		    	}
		       
		    },
		    yAxis: {},
		    series: [{
		        name: '帮助数量',
		        type: 'bar',
		        markPoint : {
	                    data : [
	                        {type : 'max', name: '最大值'},
	                        {type : 'min', name: '最小值'},
	                    ],
	                    label:{normal:{position:'insideTop',formatter:'{b}:{c}',textStyle:{color:'#969696'}}},
	                    
	                    symbolOffset:[0,'-20%'],
	                },
		        data: []
		    }]
		});	
		
selectYears(nowYear);//默认加载当年数据
}



	//装填数据
function insertData(labs, counts) {
	// 填入数据
	myChart.showLoading();//遮罩层
	myChart.setOption({
		 xAxis : {
			data : labs,
			axisLabel:{
			formatter:function(value,index){// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
						var ret='';
						value=labs;//把X轴的值传过来						
						for(var i=0;i<value[index].length;i++){						
							if(i==value[index].length-1){
								ret+=value[index][i];
							}else{
								ret+=value[index][i]+'\n';
							}
						}
						return ret;
					}
			
				}
			},
			
		series : [ {
			// 根据名字对应到相应的系列
			name : '帮助数量',
			data : counts
		} ]
	});
	myChart.hideLoading();
}

//按年份查询数据
function selectYears(year) {

					$.ajax({
						type : "POST",
						contentType : "application/json",
						dataType : "html",
					 	url : "<%=path%>/dataAnalysis/selsMeas",
                        data:  JSON.stringify({ 'year': year, 'bar': '1' })  ,
                        success: function (data) {
	                          var mydata = eval('(' + data + ')');
	                          var labs= mydata.lab.split(",");
	                          var counts= mydata.strs.split(",");
	                              insertData(labs,counts);                        	
                         },
                        error: function(data) {
                          	 layer.alert("系统繁忙！请稍后再试");
                         }
                      });
             		 return false; 
}









});
</script>