Echarts中异步数据加载与更新（上）

入门实例中的数据时在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入，Echarts中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过jQuery等工具异步获取数据后通过setOption填入数据和配置项就行。

数据加载（方式一）

1. 引入

<script src="js/echarts.js"></script>

2. DOM元素

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

3. 初始化echarts

var myChart = echarts.init(document.getElementById('main'));

4. 将script代码放入$(function( ) { })

$(function( ){
	var myChart = echarts.init(document.getElementById('main'));
	
	$.get('data/data.json').done(function(data){
		console.log(data)
		myChart.setOption({
			title:{
				text:'异步数据加载示例'
			},
			xAxis:{
				data:data.title	// title:['可乐','果汁','咖啡']
			},
			series:[
				{
					name:'销量',
					type:'bar',
					data:data.number //number:[5,10,20]
				}
			]
		})
	})
})

优点：代码简洁

缺点：遇到网络问题，延迟加载时页面会出现空白的情况，用户体验差

数据加载（方式二）

1. 引入

<script src="js/echarts.js"></script>

2. DOM元素

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

3. 初始化echarts

var myChart = echarts.init(document.getElementById('main'));

4. 先显示一个空的图例和坐标轴

myChart.setOption({
	title:{
		text:'异步数据加载示例'
	},
	tooltip:{},
	legend:{
		data:['销量']
	},
	xAxis:{
		data:[]
	},
	yAxis:{},
	series:[{
		name:'销量',
		type:'bar',
		data:[]
	}]
})

5. 请求数据

//异步加载数据
$.get('data/data.json').done(function(data){
	//填入数据
	myChart.setOption({
		xAxis:{
			data:data.title
		},
		series:[{
			//根据名字对应到响应的系列
			name:'销量',
			data:data.number
		}]
	})
})

优点：遇到网络问题，延迟加载时页面会出现一个空的图例，用户体验较好

缺点：代码繁琐

异步请求数据时的Loading动画

通过setTimeout模拟异步加载

//初始化echarts
var myChart = echarts.init(document.getElementById('main'));

// 动态加载数据
function fetchData() {
	setTimeout(function(){
		//异步加载数据
		$.get('data/data.json').done(function(data){
			myChart.hideLoading();	//隐藏Loading的加载动画
			//填入数据
			myChart.setOption({
				xAxis:{
					data:data.title
				},
				series:[{
					//根据名字找到相应的系列
					name:'销量',
					data:data.number
				}]
			})
		})
	},3000)
}

$(function(){
	//显示标题，图例和空的坐标轴
	myChart.setOption({
		title:{
			text:'异步数据加载示例'
		},
		tooltip:{},
		legend:{
			data:['销量']
		},
		xAxis:{
			data:[]
		},
		yAxis:{},
		series:[{
			name:'销量',
			type:'bar',
			data:[]
		}]
	});
	myChart.showLoading();	//显示Loading的加载动画
	fetchData();
})