及其通俗易懂的异步刷新echarts图表（柱状图）

最近前端写的多一些，遇到一个动态刷新echarts表格问题，本人也是尝试了几次才以自己觉得最通俗易懂的方法写了出来，现在拿出来和大家分享一下。

·······································································································································································································································

1.首先，导入echarts.js是必不可少的。

<script type="text/javascript" src="eCharts/echarts.js"></script>

这个容易，不谈了。。。。

2.开始写你想要的柱状图。

本人的极度丑的图，当然参数和样式可以自己改，本人毕竟不是专业的前端，看的过去就行啦，不多说。

此图虽然看上去low到爆炸，但比起那些渣渣的表格还是帅气很多的，所以，勉为其难的看看吧。

3.现在上代码。

此图的代码分为三个部分，java代码，js代码，和html代码，当然，重点肯定是在js代码上面，所以其它代码就不详细表达了。

html：

<div id="main" style="width: 600px;height:300px;"></div> 

仅仅只是一个div而已，用以固定你所需要的图表的大小。

java：

你只需要一个list方法，用以返回你所需要的json数据格式，注意，是json格式。

本人返回的是一个list对象转的json，里面有我图表所需要的一个是名字，一个是优先程度。

重点来了，现在到了js代码：

//初始化表格
         var myChart = echarts.init(document.getElementById('main'));
        //当页面加载的时候先显示横纵坐标，但没有数据 
         myChart.setOption({
        	 title:{
        	 text:'异步数据加载示例'
        	 },
        	 tooltip:{},
        	 legend:{
        	 data:['序列']
        	 },
        	 xAxis:{
        	 	data:[],
        	 	//因为本人的数据横坐标比较长，所以为了能让横坐标全部显示
        	 	axisLabel:{
				//横坐标全部显示        	 		
		       		interval:0,
		       	//横坐标倾斜45度	
		       		rotate:-45,
		       		 },
        	 },
        	 yAxis:{},
        	 series:[{
        	 name:'序列',
        	 type:'bar',
        	 data:[]
        	 }]
        	 })
        	 //异步加载数据
        	 var dataorgName = [];
        	 var dataGrade = [];
        	 $.ajax({
        		 type: "post",
        		 url: 'xxxx.action',//请求地址
        		 dataType:'json',//注意json格式
        		 //把你所需要显示的数据放出来，放在你想放的横坐标数组和对应的数值中
        		 success: function(result){
        			 for(var i=0;i<result.length;i++){
        				 dataorgName[i]=result[i].orgName;
        				 dataGrade[i]=result[i].orgSequence;
        			 }
        			 myChart.setOption({
        		       	 xAxis:{
        		       	//放横坐标的数组
        		       	 data:dataorgName,
        		       	 },
        		       	 series:[{
        		       	 name:'序列',
        		       	 //每个横坐标对应的数值
        		       	 data:dataGrade
        		       	 }]
        		       	 });
        		 }
        	 });

当然，如果你要初始化的话，肯定需要放在$(function（）{})里面了。

·······································································································································································································································

好了，就是这么简单的一个异步echarts柱状图，同学们，你们学到了吗？？？