echarts忽略Null值:使用echarts的connectNulls

在 Echarts 中,要使用  connectNulls  来连接折线图中的空数据,可按照以下步骤进行操作:

 

1. 初始化 Echarts 实例,并指定图表的配置项和数据。在配置项中的  series  部分,设置  connectNulls: true 。例如:

 

html 复制

<body>

  <!-- 为 echarts 准备一个具备大小(宽高)的 dom -->

  <div id="main" style="width: 600px;height: 400px;"></div>

  <script type="text/javascript">

    // 基于准备好的 dom,初始化 echarts 实例

    var mychart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据

    var option = {

      tooltip: {

        trigger: "axis"

      },

      legend: {

        data:('销量')

      },

      xaxis: {

        data:("衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子")

      },

      yaxis: {},

      series: ({

        name:'销量',

        type:'line',

        data:(5, 20, 36, '-', 10, 20), // 这里的数据中包含了一个空值 '-'

        connectnulls: true // 设置连接空数据

      })

    };

    // 使用刚指定的配置项和数据显示图表。

    mychart.setOption(option);

  </script>

</body>

 

 

在上述示例中, series  里的  data  数组中包含了一个空值  '-'  ,通过设置  connectNulls: true  ,Echarts 会在绘制折线图时连接这些空数据点,使折线不会出现中断。

 

请注意, connectNulls  的默认值为  false  ,即不连接空数据。如果数据中存在空值(如  null  、 0  或其他表示空值的标识)且希望折线连续,就需要将其设置为  true  。同时,确保  xaxis  中的数据和  data  中的非空数据在位置上是对应的,这样才能正确地连接空数据点并展示折线图。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用echarts时,如果出现报错"Initialize failed: invalid dom",这通常是由于在DOM还没有加载完成时,echarts尝试获取DOM元素导致的。在vue中引用echarts时,可能会发生这个问题,因为在模板的DOM元素还没有加载完成时,echarts.init()就已经开始执行了。所以需要确保在初始化echarts之前,DOM元素已经加载完成。一个解决方法是将echarts的初始化代码放在mounted生命周期钩子函数中,这样可以确保DOM元素已经加载完成再进行echarts的初始化操作。另外,如果后端数据返回较慢,在数据未返回之前切换了当前页面,也有可能导致类似的报错。这种情况下,可以在切换页面前进行判断,确保数据已经返回再进行echarts的初始化操作,以避免报错。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue使用echarts报错:Error: Initialize failed: invalid dom.](https://blog.csdn.net/m0_71645665/article/details/130805086)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue2项目中使用echarts时,ECharts 报错问题:Initialize failed: invalid dom的报错原因](https://blog.csdn.net/weixin_54193181/article/details/126245588)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值