ECharts obtiene datos de forma dinámica

Recientemente, tengo que contactar con Echarts este complemento para las necesidades del proyecto. Solía ​​mirar algunos gráficos circulares y gráficos de barras en Internet, ¡y pensé que esto solo debería hacerlo una persona talentosa! De hecho, muchas veces, no puedes ver el monte Tai con los ojos vendados. No sabes que hay muchas cosas que parecen ser altas y altas. Lo sabrás después de ponerte en contacto con ellas, pero en realidad son muy simple. El siguiente es un registro de cómo uso Echarts para vincular datos dinámicamente con AJAX simple.

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="http://echarts.baidu.com/build/dist/echarts-all.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="chartmain" style="width: 800px; height: 500px;"></div>
    <script type="text/javascript">        
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'));        
		myChart.showLoading({
		    text: '正在努力的读取数据中...',    //loading
		});
		//异步加载的配置项和数据显示图表
		function bindData(){
			$.ajax({
				async: true,
				url: 'js/data.json',	
				type: 'get',	
				dataType: 'json',	
				data: {},
				success:function(echartData){
					if(echartData){
			            myChart.setOption({      
				            tooltip: {
				                show: true
				            },
				            legend: {
				                data:['销量']
				            },
				            xAxis : [
				                {
				                    type : 'category',
				                    data : echartData.name
				                }
				            ],
				            yAxis : [
				                {
				                    type : 'value'
				                }
				            ],
				            series : [
				                {
				                    "name":"销量",
				                    "type":"bar",
				                    "data":echartData.data
				                }
				            ]
			            })
			            myChart.hideLoading();	//loading hidden
					}
				}
			})
		}
		bindData();
    </script>	
</body>
</html>


Los siguientes son los datos json:

{
	"name":["Android","IOS","PC","Other"],
	"data":[420,200,360,100]
}

Debido a que la interfaz de fondo no está bien escrita, la probé localmente. Recuerde que la ruta de prueba local debería ser así: http://127.0.0.1:8020/echarts%E5%8A%A8%E6%80%81%E7 % BB% 91% E5% AE% 9A% E6% 95% B0% E6% 8D% AE / index.html? __ hbt = 1506561862746

No puede ser similar a este tipo de archivo: /// D: /
El motivo no me queda claroBueno en

Supongo que te gusta

Origin blog.csdn.net/dizuncainiao/article/details/78120735
Recomendado
Clasificación