Echarts dataZoom关于filterMode的问题

前言

我的项目是用 Echarts 构建一个曲线图。在图表中需要实现的功能有这些：

1、可通过鼠标左键实现区域选择后进行放大只看该区域数据

2、可通过鼠标左键双击恢复原图

3、可实现任意拖拽Markline

4、可通过滚动轴进行缩放等

整体效果

区域放大后效果

关注我，后面也会陆续记录一些相关的问题

今天记录在进行鼠标左键区域选择后，本没有关联的两个数据点自动连接的问题，如下图所示

本来这两个点之间还有一个数据点，但是因为区域选择没有选到，Echarts就默认为连接上了。

为了解决这个问题，翻看官网配置文档发现，是dataZoom的 filterMode属性在搞鬼

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

数据过滤模式（dataZoom.filterMode）的设置不同，效果也不同。

可选值为：

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

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

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

'none': 不过滤数据，只改变数轴范围。

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

当『只有 X 轴或只有 Y 轴受 dataZoom 组件控制』时，常使用 filterMode: 'filter'，这样能使另一个轴自适应过滤后的数值范围。

当『X 轴 Y 轴分别受 dataZoom 组件控制』时：

如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』，比如在『双数值轴散点图』中，那么两个轴可都设为 filterMode: 'empty'。

如果 X 轴为主，Y 轴为辅，比如在『柱状图』中，需要『拖动 dataZoomX 改变 X 轴过滤柱子时，Y 轴的范围也自适应剩余柱子的高度』，『拖动 dataZoomY 改变 Y 轴过滤柱子时，X 轴范围不受影响』，那么就 X轴设为 filterMode: 'filter'，Y 轴设为 filterMode: 'empty'，即主轴 'filter'，辅轴 'empty'。

我这里是不需要过滤掉的，因此我这里用“none”

option = {
    dataZoom: [
        {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'none'//不过滤数据，只改变数轴范围
        },
        {
            id: 'dataZoomY',
            type: 'slider',
            yAxisIndex: [0],
            filterMode: 'none'//不过滤数据，只改变数轴范围
        }
    ],
    xAxis: {type: 'value'},
    yAxis: {type: 'value'},
    series{
        type: 'bar',
        data: [
            // 第一列对应 X 轴，第二列对应 Y 轴。
            [12, 24, 36],
            [90, 80, 70],
            [3, 9, 27],
            [1, 11, 111]
        ]
    }
}

最后实现效果如图，不过滤数据，只改变数轴范围