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

這樣問題就解決了！