ECharts动态获取数据

最近做项目的需要，我不得不接触一下Echarts这个插件。以前看着网上的一些饼图柱形图之类的，我就想这应该只有牛人才做的出来吧！其实好多时候，一叶障目不见泰山，殊不知有好多看似觉得高大上的东西，在你接触过了解后就知道，其实很简单。下面这篇记录一下我用Echarts简单的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>

下面是json数据：

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

因为后台的接口没有写好，我是在本地测试的，记住本地测试路径应该像这样：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

不可以类似于这种的file:///D:/
其中原因我说不太清楚

ECharts动态获取数据

猜你喜欢