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

    这样问题就解决了!

  • 相关阅读:
    六 .Flask 案例
    五 .Flask 蓝图(文件目录结构)
    四 .Flask 模板 中间件 特殊装饰器 CBV 正则 基础知识(使用)
    七 .Django 模板(template)
    三 .Flask 登录案例认证装饰器 session
    二 .Flask 配置文件 路由 视图 请求 响应 cookie session 闪现 基础知识(使用)
    一 .Flask介绍和基本使用
    一 .微信消息推送
    二 .redis在django中使用
    一 python+redis使用(字典 列表)
  • 原文地址:https://www.cnblogs.com/xinjianheyi/p/6206488.html
Copyright © 2011-2022 走看看