Echarts中使用dataZoom-yAxisIndex后折线图不显示断点了

﹏゛Aeljinh陌琳

已于 2022-10-13 09:24:41 修改

阅读量1.9k

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2020-07-17 11:03:20 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37541486/article/details/107403150

版权

在Echarts中使用dataZoom-yAxisIndex进行纵坐标区域缩放时，发现原本应该断开的数据点被连接起来。通过排查官方文档，发现是filterMode配置项设置为'filter'导致数据被过滤。解决方案是将其改为'empty'，以保持数据断点的正确显示。分享这一发现，希望对遇到相同问题的人有所帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用echarts时，想要给纵坐标增加【区域缩放】功能，所以就有了如下代码块

dataZoom: [
    {
         type: 'slider',
         show: true,
         yAxisIndex: [0],
         left: '0%'
     }
 ],
 //或者
dataZoom: [
     {
         type: 'slider',
         show: true,
         yAxisIndex: [0],
         left: '0%'
     },
     {
         type: 'slider',
         show: true,
         yAxisIndex: [1],
         left: '98%'
     }
 ],

给折线图option 增加dataZoom 后发现数据为null的时刻被连接起来
如图
【有问题的效果】