本文主要是介绍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>
这篇关于Echars柱状图异步加载数据以及X轴纵向显示实例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
