echarts异步数据加载MySQL_echarts（04）：异步加载数据

ECharts 通常数据设置在 setOption 中，如果我们需要异步加载数据，可以配合 jQuery等工具，在异步获取数据后通过 setOption 填入数据和配置项就行。

json 数据：

{"data_pie": [

{"value":235, "name":"视频广告"},

{"value":274, "name":"联盟广告"},

{"value":310, "name":"邮件营销"},

{"value":335, "name":"直接访问"},

{"value":400, "name":"搜索引擎"}

]

}

实例

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

$.get('https://www.runoob.com/static/js/echarts_test_data.json', function(data) {

myChart.setOption({

series : [

{

name:'访问来源',

type:'pie', //设置图表类型为饼图

radius: '55%', //饼图的半径，外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。

data:data.data_pie

}

]

})

},'json')

如果异步加载需要一段时间，我们可以添加 loading 效果，ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画：

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

myChart.showLoading();//开启 loading 效果

$.get('https://www.runoob.com/static/js/echarts_test_data.json', function(data) {

myChart.hideLoading();//隐藏 loading 效果

myChart.setOption({

series : [

{

name:'访问来源',

type:'pie', //设置图表类型为饼图

radius: '55%', //饼图的半径，外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。

data:data.data_pie

}

]

})

},'json')

数据的动态更新

ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。

所有数据的更新都通过 setOption 实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

var base = +new Date(2014, 9, 3);var oneDay = 24 * 3600 * 1000;var date =[];var data = [Math.random() * 150];var now = newDate(base);functionaddData(shift) {

now= [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');

date.push(now);

data.push((Math.random()- 0.4) * 10 + data[data.length - 1]);if(shift) {

date.shift();

data.shift();

}

now= new Date(+new Date(now) +oneDay);

}for (var i = 1; i < 100; i++) {

addData();

}

option={

xAxis: {

type:'category',

boundaryGap:false,

data: date

},

yAxis: {

boundaryGap: [0, '50%'],

type:'value'},

series: [

{

name:'成交',

type:'line',

smooth:true,

symbol:'none',

stack:'a',

areaStyle: {

normal: {}

},

data: data

}

]

};

setInterval(function() {

addData(true);

myChart.setOption({

xAxis: {

data: date

},

series: [{

name:'成交',

data: data

}]

});

},500);

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

myChart.setOption(option);