前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ECharts折线图使用dataZoom出现竖线BUG解决

ECharts折线图使用dataZoom出现竖线BUG解决

作者头像
德顺
发布2021-12-18 11:50:26
3.5K1
发布2021-12-18 11:50:26
举报
文章被收录于专栏:前端资源

Echarts 项目中使用折线图 type: line ,在设置了 dataZoom 区域缩放时,会出现以下问题。

  1. 数据变化后,如果差值比较大,会出现连线不能点到点,出现竖线
  2. 鼠标拖动 Zoom 滚动时,该现象又消失了
  3. 坐标轴是时间时,右侧数据增加,不会有问题,数据减少就会出现问题

如上图所示,折现出现了竖线,不能点对点连接,最右边一个还有一节多余的线。

解决问题:

这或许是 Echarts 的一个 bug,不过可以通过修改 dataZoom 组件的 filterMode 属性来防止问题的出现。

代码语言:javascript
复制
option = {
    dataZoom: [
        {
            id: 'dataZoomY',
            type: 'slider',
            yAxisIndex: [0],
            filterMode: 'empty'
        }
    ],
    ...
}

dataZoom 的运行原理是通过 数据过滤 以及在内部设置轴的显示窗口来达到 数据窗口缩放 的效果。

数据过滤模式(dataZoom.filterMode)的设置不同,效果也不同。

可选值为:

filter 当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。

weakFilter 当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。

empty 当前数据窗口外的数据,被设置为空。即 不会 影响其他轴的数据范围。

none  不过滤数据,只改变数轴范围。

如何设置,由用户根据场景和需求自己决定。经验来说:

  • 当『只有 X 轴 或 只有 Y 轴受 dataZoom 组件控制』时,常使用 filterMode: 'filter',这样能使另一个轴自适应过滤后的数值范围。
  • 当『X 轴 Y 轴分别受 dataZoom 组件控制』时:
    • 如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』,比如在『双数值轴散点图』中,那么两个轴可都设为 fiterMode: 'empty'
    • 如果 X 轴为主,Y 轴为辅,比如在『柱状图』中,需要『拖动 dataZoomX 改变 X 轴过滤柱子时,Y 轴的范围也自适应剩余柱子的高度』,『拖动 dataZoomY 改变 Y 轴过滤柱子时,X 轴范围不受影响』,那么就 X轴设为 fiterMode: 'filter',Y 轴设为 fiterMode: 'empty',即主轴 'filter',辅轴 'empty'

这里将其设置为 empty 就可以避免该问题。

未经允许不得转载:w3h5 » ECharts折线图使用dataZoom出现竖线BUG解决

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决问题:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档