Echarts 项目中使用折线图 type: line ，在设置了 dataZoom 区域缩放时，会出现以下问题。
- 数据变化后，如果差值比较大，会出现连线不能点到点，出现竖线
- 鼠标拖动 Zoom 滚动时，该现象又消失了
- 坐标轴是时间时，右侧数据增加，不会有问题，数据减少就会出现问题
如上图所示，折现出现了竖线，不能点对点连接，最右边一个还有一节多余的线。
解决问题：
这或许是 Echarts 的一个 bug，不过可以通过修改 dataZoom 组件的 filterMode 属性来防止问题的出现。
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'。
- 如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』，比如在『双数值轴散点图』中，那么两个轴可都设为
这里将其设置为 empty 就可以避免该问题。
未经允许不得转载：w3h5 » ECharts折线图使用dataZoom出现竖线BUG解决
