echarts异步加载柱状图遇到的错误- Error: Component series. not exists. Load it first.

今天看了下echarts教程之中的异步加载柱状图，我按照教程中的代码敲出来之后再运行，就报了一个 

Error: Component series. not exists. Load it first.

的错误，话不多说，教程中的代码如下所示：

 

function fetchData(cb) {
    // 通过 setTimeout 模拟异步加载
    setTimeout(function () {
        cb({
            categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
            data: [5, 20, 36, 10, 10, 20]
        });
    }, 1000);
}

// 初始 option
option = {
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
};

fetchData(function (data) {
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
});

 

这样则会出错，因为初始化option中的series属性并没有与myCharts.setOption中的series属性一一对应，因此导致series并未被完全加载。

修改后的部分如下：

 function fetchData(cb){
        setTimeout(function(){
            cb({
                categories:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","新增"],
                data:[5,20,36,10,10,20,60]
            });
        },1000);
    }
//    初始化option
    option={
        title:{
            text:'异步数据加载'
        },
        tooltip:{},
        legend:{
            data:['销量']
        },
        xAxis:{
            data:[]
        },
        yAxis:{},
        series:[{
            name:'销量',
            type:'bar',
            data:[]
        }]
    }
    fetchData(function(data){
        mychart.setOption({
            xAxis:{
                data:data.categories
            },
            yAxis:{},
            series:[{
                name:'销量',
                type:'bar',
                data:data.data
            }]
        });
    });

这样问题就解决了！