zoukankan      html  css  js  c++  java
  • ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决

    1.  我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有的时候我们在选择一定得条件时获取不到数据,当没有数据时ECharts会默认调用 noDataLoadingOption 这个配置项中的内容来显示一个冒泡的页面,中间显示暂无数据这四个字:

    2.  当我们使用的这个图表没有  xAxis 这个配置项的时候就没有问题,但是我们使用柱状图和折线图的时候就会报错,这个问题我一开始就有一点点想不通,因为这个错误显示的是 option 下的data,但是大家都知道 option 下没有 data 这个配置项,于是我就在官网的实例中试着在有 data 的配置项中删除数据,然后发现是 xAxis 中的 data 为空时就会报错,有了错误之后这个 js 就不会继续执行下去,这个我们都是知道的,但是我需要的就是在没有数据时显示以上的界面啊,这个问题就把我难倒了,于是我在网上搜索这个问题的答案,发现并没有,但是这还是阻止不了我解决问题的脚步,于是我突然想到了可不可以自己在新定义一个 option 呢?想到这个后我就新定义了一个 option ,里面就是有几个什么内容都没有的配置项,代码下面会贴出,这个时候我们就可以在 js 中进行判断了,当 xAxis 中的 data 没有数据的时候我们就可以使用自己新建的 option ,反则使用之前的 option:这个时候新建的 option 因为里面什么都没有,就会显示上面的界面。

    if(insOption.xAxis[0].data.length == 0){
       pieChart.clear();
       var option1 = {
            title :{
               text:""
            },
            series:[
                {
    
                }
            ]
        };
        pieChart.setOption(option1);
    }else{
        pieChart.clear();
            pieChart.setOption(insOption);
    }
  • 相关阅读:
    【洛谷P6139】【模板】广义后缀自动机(广义 SAM)
    【CF700E】Cool Slogans
    【CF605E】Intergalaxy Trips
    【洛谷P3638】机器人
    【洛谷P4762】Virus synthesis
    Web前端从入门到精通-8 css简介——清除浮动
    Web前端从入门到精通-7 css简介——浮动
    Web前端从入门到精通-6 css简介——选择器优先级
    Web前端从入门到精通-5 css简介——css概述和选择器
    Web前端从入门到精通-4 html简介
  • 原文地址:https://www.cnblogs.com/wgl1995/p/6277289.html
Copyright © 2011-2022 走看看