正文
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
}]
});
});
这样问题就解决了！
