dataZoom概述、dataZoomSelect、dataZoomInside

dataZoom

dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

ECharts现在支持这几种类型的 dataZoom 组件：
内置型数据区域缩放组件（dataZoomInside）
- 内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
滑动条型数据区域缩放组件（dataZoomSlider）
- 有单独的滑动条，用户在滑动条上进行缩放或漫游。
框选型数据区域缩放组件（dataZoomSelect）
- 提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。

框选型数据区域缩放组件（dataZoomSelect）

提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。
详见与toolbox有关的教程，这里不展开叙述。

dataZoom-inside

内置型数据区域缩放组件（dataZoomInside）
内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。

所谓『内置』，即内置在坐标系中。
平移：在坐标系中滑动拖拽进行数据区域平移。
缩放：
- PC端：鼠标在坐标系范围内滚轮滚动（MAC触控板类同）
- 移动端：在移动端触屏上，支持两指滑动缩放。

dataZoom-inside的部分常用属性

下面解析dataZoom-inside的部分常用属性：

dataZoom-inside. type = ‘inside’

设定dataZoom的类型。

dataZoom-inside. id

组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。

dataZoom-inside. disabled

是否停止组件的功能。

dataZoom-inside. xAxisIndexnumberArray

设置 dataZoom-inside 组件控制的 x轴（即xAxis，是直角坐标系中的概念）。
不指定时，当 dataZoom-inside.orient 为 ‘horizontal’时，默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。

例如有如下 ECharts option：

option: {
    xAxis: [
        {...}, // 第一个 xAxis
        {...}, // 第二个 xAxis
        {...}, // 第三个 xAxis
        {...}  // 第四个 xAxis
    ],
    dataZoom: [
        { // 第一个 dataZoom 组件
            xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
        },
        { // 第二个 dataZoom 组件
            xAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 xAxis
        }
    ]
}

dataZoom-inside. yAxisIndexnumberArray

设置 dataZoom-inside 组件控制的 y轴（即yAxis，是直角坐标系中的概念）。
不指定时，当 dataZoom-inside.orient 为 ‘vertical’时，默认控制和 dataZoom 平行的第一个 yAxis。但是不建议使用默认值，建议显式指定。
如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。

dataZoom-inside. filterMode = ‘filter’

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’。

下面是个具体例子：

option = {
    dataZoom: [
        {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter'
        },
        {
            id: 'dataZoomY',
            type: 'slider',
            yAxisIndex: [0],
            filterMode: 'empty'
        }
    ],
    xAxis: {type: 'value'},
    yAxis: {type: 'value'},
    series{
        type: 'bar',
        data: [
            // 第一列对应 X 轴，第二列对应 Y 轴。
            [12, 24, 36],
            [90, 80, 70],
            [3, 9, 27],
            [1, 11, 111]
        ]
    }
}
上例中，dataZoomX 的 filterMode 设置为 'filter'。于是，假设当用户拖拽 dataZoomX（不去动 dataZoomY）导致其 valueWindow 变为 [2, 50] 时，dataZoomX 对 series.data 的第一列进行遍历，窗口外的整项去掉，最终得到的 series.data 为：

[
    // 第一列对应 X 轴，第二列对应 Y 轴。
    [12, 24, 36],
    // [90, 80, 70] 整项被过滤掉，因为 90 在 dataWindow 之外。
    [3, 9, 27]
    // [1, 11, 111] 整项被过滤掉，因为 1 在 dataWindow 之外。
]
过滤前，series.data 中对应 Y 轴的值有 24、80、9、11，过滤后，只剩下 24 和 9，那么 Y 轴的显示范围就会自动改变以适应剩下的这两个值的显示（如果 Y 轴没有被设置 min、max 固定其显示范围的话）。

所以，filterMode: 'filter' 的效果是：过滤数据后使另外的轴也能自动适应当前数据的范围。

再从头来，上例中 dataZoomY 的 filterMode 设置为 'empty'。于是，假设当用户拖拽 dataZoomY（不去动 dataZoomX）导致其 dataWindow 变为 [10, 60] 时，dataZoomY 对 series.data 的第二列进行遍历，窗口外的值被设置为 empty （即替换为 NaN，这样设置为空的项，其所对应柱形，在 X 轴还有占位，只是不显示出来）。最终得到的 series.data 为：

[
    // 第一列对应 X 轴，第二列对应 Y 轴。
    [12, 24, 36],
    [90, NaN, 70], // 设置为 empty (NaN)
    [3, NaN, 27],  // 设置为 empty (NaN)
    [1, 11, 111]
]
这时，series.data 中对应于 X 轴的值仍然全部保留不受影响，为 12、90、3、1。那么用户对 dataZoomY 的拖拽操作不会影响到 X 轴的范围。这样的效果，对于离群点（outlier）过滤功能，比较清晰。

如下面的例子：
myChart.showLoading();

$.get(ROOT_PATH + '/data/asset/data/obama_budget_proposal_2012.list.json', function (obama_budget_2012) {
    myChart.hideLoading();

    option = {
        tooltip : {
            trigger: 'item'
        },
        legend: {
            data: ['Growth', 'Budget 2011', 'Budget 2012'],
            itemGap: 5
        },
        grid: {
            top: '12%',
            left: '1%',
            right: '10%',
            containLabel: true
        },
        xAxis: [
            {
                type : 'category',
                data : obama_budget_2012.names
            }
        ],
        yAxis: [
            {
                type : 'value',
                name : 'Budget (million USD)',
                axisLabel: {
                    formatter: function (a) {
                        a = +a;
                        return isFinite(a)
                            ? echarts.format.addCommas(+a / 1000)
                            : '';
                    }
                }
            }
        ],
        dataZoom: [
            {
                type: 'slider',
                show: true,
                start: 94,
                end: 100,
                handleSize: 8
            },
            {
                type: 'inside',
                start: 94,
                end: 100
            },
            {
                type: 'slider',
                show: true,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 12,
                height: '70%',
                handleSize: 8,
                showDataShadow: false,
                left: '93%'
            }
        ],
        series : [
            {
                name: 'Budget 2011',
                type: 'bar',
                data: obama_budget_2012.budget2011List
            },
            {
                name: 'Budget 2012',
                type: 'bar',
                data: obama_budget_2012.budget2012List
            }
        ]
    };

    myChart.setOption(option);

});

dataZoom-inside. start

数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
dataZoom-inside.start 和 dataZoom-inside.end 共同用百分比的形式定义了数据窗口范围。

dataZoom-inside. end = 100

数据窗口范围的结束百分比。范围是：0 ~ 100。

dataZoom-inside. startValuenumberstringDate

数据窗口范围的起始数值。如果设置了 dataZoom-inside.start 则 startValue 失效。
dataZoom-inside.startValue 和 dataZoom-inside.endValue 共同用绝对数值的形式定义了数据窗口范围。
注意，如果轴的类型为 category，则 startValue 既可以设置为 axis.data 数组的 index，也可以设置为数组值本身。但是如果设置为数组值本身，会在内部自动转化为数组的 index

dataZoom-inside. endValuenumberstringDate

数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效。
dataZoom-inside.startValue 和 dataZoom-inside.endValue 共同用绝对数值的形式定义了数据窗口范围

dataZoom-inside. rangeModeArray

形式为：[rangeModeForStart, rangeModeForEnd]。

例如 rangeMode: [‘value’, ‘percent’]，表示 start 值取绝对数值，end 取百分比。

每项可选值为：’value’, ‘percent’
- ‘value’ 模式：处于此模式下，坐标轴范围（axis extent）总只会被dataZoom.startValue and dataZoom.endValue 决定，而不管数据是多少，以及不管，axis.min 和 axis.max 怎么设置。
- ‘percent’ 模式：处于此模式下，100 代表 100% 的 [dMin, dMax]。这里 dMin 表示，如果 axis.min 设置了就是 axis.min，否则是 data.extent[0]；dMax 表示，如果 axis.max 设置了就是 axis.max，否则是 data.extent[1]。[dMin, dMax] 乘以 percent 的结果得到坐标轴范围（axis extent）。
默认情况下，rangeMode 总是被自动设定。如果指定了 option.start/option.end 那么就设定为 ‘percent’，如果指定了 option.startValue/option.endValue 那么就设定为 ‘value’。以及当用户用不用操作触发视图改变时，rangeMode 也可能会相应得变化（如，通过 toolbox.dataZoom 触发视图改变时，rangeMode 会自动被设置为 value，通过 dataZoom-inside 和 dataZoom-slider 触发视图改变时，会自动被设置为 ‘percent’）。
如果我们手动在 option 中设定了 rangeMode，那么它只在 start 和 startValue 都设置了或者 end 和 endValue 都设置了才有意义。所以通常我们没必要在 option 中指定 rangeMode。

举例一个使用场景：当我们使用动态数据时（即，周期性得通过 setOption 来改变数据），如果 rangeMode 在 ‘value’ 模式，dataZoom 的窗口会一直保持在一个固定的值区间，无论数据怎么改变添加了多少；如果 rangeMode 在 ‘percent’ 模式，窗口会随着数据的添加而改变（假设 axis.min 和 axis.max 没有被设置）。

dataZoom-inside. zoomOnMouseWheel = true

如何触发缩放。可选值为：
- true：表示不按任何功能键，鼠标滚轮能触发缩放。
- false：表示鼠标滚轮不能触发缩放。
- ‘shift’：表示按住 shift 和鼠标滚轮能触发缩放。
- ‘ctrl’：表示按住 ctrl 和鼠标滚轮能触发缩放。
- ‘alt’：表示按住 alt 和鼠标滚轮能触发缩放。
- dataZoom-inside. moveOnMouseMove = true

如何触发数据窗口平移。可选值为：
- true：表示不按任何功能键，鼠标移动能触发数据窗口平移。
- false：表示鼠标移动不能触发平移。
- ‘shift’：表示按住 shift 和鼠标移动能触发数据窗口平移。
- ‘ctrl’：表示按住 ctrl 和鼠标移动能触发数据窗口平移。
- ‘alt’：表示按住 alt 和鼠标移动能触发数据窗口平移。

dataZoom-inside. moveOnMouseWheel = true

如何触发数据窗口平移。可选值为：
- true：表示不按任何功能键，鼠标滚轮能触发数据窗口平移。
- false：表示鼠标滚轮不能触发平移。
- ‘shift’：表示按住 shift 和鼠标滚轮能触发数据窗口平移。
- ‘ctrl’：表示按住 ctrl 和鼠标滚轮能触发数据窗口平移。
- ‘alt’：表示按住 alt 和鼠标滚轮能触发数据窗口平移。

dataZoom-inside. preventDefaultMouseMove = true

是否阻止 mousemove 事件的默认行为。

toolbox代码及详解注释 dataZoom-slider概述及其主要属性

评论区（0）

dataZoom概述、dataZoomSelect、dataZoomInside

dataZoom

dataZoom-inside

dataZoom-inside的部分常用属性

评论 取消

评论取消