ECharts obtains data dynamically

Recently, I have to contact Echarts this plug-in for the needs of the project. I used to look at some pie charts and bar charts on the Internet, and I thought that this should only be done by a talented person! In fact, many times, you can't see Mount Tai in a blindfold, but you don't know that there are many things that seem to be tall and tall, and you will know after you get in touch with them, but they are actually very simple. The following is a record of how I use Echarts to dynamically bind data with simple AJAX.

<!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>

The following is the json data:

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

Because the background interface is not written well, I tested it locally. Remember that the local test path should be like this: 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

Can not be similar to this kind of file:///D:/
The reason is not clear to me Good at

ECharts obtains data dynamically

Guess you like