Its user-friendly asynchronous refresh echarts chart (histogram)

Recent front-end write some more, come across a dynamic refresh echarts table issue, I also tried a few times to feel it the most user-friendly method to write out, and now out and share with you.

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

1. First, import echarts.js is essential.

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

This is easy, talk about the. . . .

2. Start writing histogram you want.

I am extremely ugly chart, of course, their own parameters and styles can change, after all, I am not a professional front-end look of the past on the line, not much to say.

This figure although it seems low to explode, but compared to those slag slag table or handsome lot, so reluctant to see it.

3. On the code now.

This code is divided into three portions in FIG, java code js code, html code and, of course, must be focused on the above js code, other code not described in detail so expressed.

html：

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

It is just a div to fix the chart you need size.

java：

You only need a list method to return json data format you need, note that json format.

I returned the object is a list of turn json, there are chart I needed was a name, a priority degree.

Focus here, and now to the js code:

//初始化表格
         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
        		       	 }]
        		       	 });
        		 }
        	 });

Of course, if you want to initialize, then certainly you need to put $ (function () {}) inside.

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

Well, is that simple of an asynchronous echarts histogram, the students, you learn it? ? ?