Su carta eCharts de actualización asíncrona fácil de usar (histograma)

Recientes front-end escribir un poco más, venir a través de un tema dinámico mesa eCharts de actualización, también probé un par de veces para sentir que el método más fácil de usar para escribir, y ahora salir y compartir con ustedes.

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

1. En primer lugar, echarts.js importación es esencial.

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

Esto es fácil, hablar sobre el. . . .

2. Iniciar histograma de escritura que desea.

Estoy muy fea carta, por supuesto, sus propios parámetros y estilos pueden cambiar, después de todo, no soy un vistazo front-end profesional del pasado en la línea, no hay mucho que decir.

Esta cifra aunque parece baja a explotar, pero en comparación con aquellos tabla de escoria de la escoria o lote guapo, tan reacios a verlo.

3. En el código ahora.

Este código se divide en tres porciones en la figura, el código java js código, el código HTML y, por supuesto, deben centrarse en el código js anteriores, otro código no descrita en detalle por lo expresa.

html:

<Div id = estilo "principal" = "width: 600px; altura: 300px;"> </ div> 

Es sólo un div para fijar el gráfico que necesita tamaño.

Java:

Sólo se necesita un método de lista para volver formato de datos JSON que necesita, tenga en cuenta que el formato JSON.

Volví el objeto es una lista de JSON a su vez, hay carta que necesitaba era un nombre, un grado de prioridad.

Centrarse aquí, y ahora con el código 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
        		       	 }]
        		       	 });
        		 }
        	 });

Por supuesto, si desea inicializar, entonces, ciertamente, hay que poner $ (function () {}) en el interior.

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

Bueno, es así de sencilla de una asíncrona eCharts histograma, los estudiantes, lo aprendió? ? ?