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

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

饼图的数据和配置项如下

option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} 
{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();
        }
    }) 

最后饼图成功的绘制