zoukankan      html  css  js  c++  java
  • echarts异步加载柱状图遇到的错误- Error: Component series. not exists. Load it first.

    今天看了下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     });

    这样问题就解决了!

  • 相关阅读:
    [五]SpringMvc学习-Restful风格实现
    [四]SpringMvc学习-对servlet与json的支持与实现
    [三]SpringMvc学习-封装、乱码问题、重定向、转发
    Android-aidl, binder,surfaceview
    linux memory dump--http://www.forensicswiki.org/wiki/Tools:Memory_Imaging
    Vanish/squid
    dongle --NFC
    词频统计 in office
    各种小巧的Hello World
    程序入口函数和glibc及C++全局构造和析构
  • 原文地址:https://www.cnblogs.com/xinjianheyi/p/6206488.html
Copyright © 2011-2022 走看看