今天在使用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，转载请注明出处，谢谢。
