今天看了下echarts教程之中的异步加载柱状图,我按照教程中的代码敲出来之后再运行,就报了一个
Error: Component series. not exists. Load it first.
的错误,话不多说,教程中的代码如下所示:
1 function fetchData(cb) { 2 // 通过 setTimeout 模拟异步加载 3 setTimeout(function () { 4 cb({ 5 categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], 6 data: [5, 20, 36, 10, 10, 20] 7 }); 8 }, 1000); 9 } 10 11 // 初始 option 12 option = { 13 title: { 14 text: '异步数据加载示例' 15 }, 16 tooltip: {}, 17 legend: { 18 data:['销量'] 19 }, 20 xAxis: { 21 data: [] 22 }, 23 yAxis: {}, 24 series: [{ 25 name: '销量', 26 type: 'bar', 27 data: [] 28 }] 29 }; 30 31 fetchData(function (data) { 32 myChart.setOption({ 33 xAxis: { 34 data: data.categories 35 }, 36 series: [{ 37 // 根据名字对应到相应的系列 38 name: '销量', 39 data: data.data 40 }] 41 }); 42 });
这样则会出错,因为初始化option中的series属性并没有与myCharts.setOption中的series属性一一对应,因此导致series并未被完全加载。
修改后的部分如下:
1 function fetchData(cb){ 2 setTimeout(function(){ 3 cb({ 4 categories:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","新增"], 5 data:[5,20,36,10,10,20,60] 6 }); 7 },1000); 8 } 9 // 初始化option 10 option={ 11 title:{ 12 text:'异步数据加载' 13 }, 14 tooltip:{}, 15 legend:{ 16 data:['销量'] 17 }, 18 xAxis:{ 19 data:[] 20 }, 21 yAxis:{}, 22 series:[{ 23 name:'销量', 24 type:'bar', 25 data:[] 26 }] 27 } 28 fetchData(function(data){ 29 mychart.setOption({ 30 xAxis:{ 31 data:data.categories 32 }, 33 yAxis:{}, 34 series:[{ 35 name:'销量', 36 type:'bar', 37 data:data.data 38 }] 39 }); 40 });
这样问题就解决了!