echarts中饼图的异步数据加载绘制

ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行，但是从后台异步获取数据后，需要在前台根据不同的图表拼接成相应图表data的数据格式，一般常用的图表有折现图，柱状图，饼图。这里说明饼图的使用方法。

饼图的数据和配置项如下

option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};

其中配置项中的data需要从后台异步获取数据后填充进去，而我们从后台获取到了关于value和name的json数据

故在此我们需要拼接饼图中data的数据格式

data: result.degree    //legend里的data数据

data: (function(){
var rs = [];
for(var res in result.degree){
rs.push({
name :result.degree[res],
value:result.count[res]
});
}
return rs;
})()

首次在页面加载时先加载图表的配置项，然后通过ajax请求异步请求数据，得到数据后再利用拼接完成的数据格式动态绘制饼图。

这是异步请求数据和动态加载饼图的完成代码

    $.ajax({
type : "get",
async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）

url : "此处为请求的url地址",    //请求发送到
data : {},
dataType : "json",        //返回数据形式为json

success : function(result) {
myChart.setOption({        //填入数据
legend: {
data: result.degree
},
series: [{
data: (function(){
var rs = [];
for(var res in result.degree){
rs.push({
name :result.degree[res],
value:result.count[res]
});
}
return rs;
})()
}]
});

myChart.hideLoading();    //隐藏加载动画
},
error : function(errorMsg) {
alert("图表请求数据失败!");
myChart.hideLoading();
}
}) 

最后饼图成功的绘制