echarts dataZoom之filterMode问题记录

今天在使用echarts dataZoom的时候遇到个一直被我忽略的问题，兜兜转转找了一两个小时，总算发现了原因，那就是dataZoom的这个属性：filterMode。

先看下问题，这里简化模拟了下问题出现的过程，方便大家阅读。（实际项目中会复杂很多。。。这也是我找了半天bug的原因）

当前案例echarts版本：5.3.3

现有趋势图如下：

image.png

这里我给折线设置了上下限，故意让一部分数据不在上下限范围内，但是鼠标移上去还是能显示具体值：

image.png

现在我们加上横向缩放功能：

image.png
可以看到图形变了，超出上下限范围的点不会连线，鼠标移上去也不会显示值。

要想达到之前的效果需要配置下 filterMode: 'none'：
以下是echarts 官网关于filterMode的说明，很详细，只是之前忽略了：

image.png
image.png
配置后问题完美解决，上述案例完整代码为：

option = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  tooltip: {
    trigger: 'axis'
  },
  yAxis: [
    {
      type: 'value',
      min: 100,
      max: 150
    }
  ],
  dataZoom: [
    {
      type: 'inside',
      yAxisIndex: 0,
      filterMode: 'none'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]
};

试下filterMode其他属性

filterMode:'filter':这个之前看过了就是上面那个效果，默认就是filter

image.png

filterMode:'weakFilter':这个在当前案例中和filter表现一致，当前数据窗口外的数据，被 过滤掉。

filterMode:'empty':窗口范围外的数据不会连接，但是鼠标移上去会显示值

image.png

若对你有帮助，请点个赞吧，谢谢支持！
本文地址：https://www.jianshu.com/p/f064eb9ada1b，转载请注明出处，谢谢。