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();        }    }) 

最后饼图成功的绘制