echartdatazoom详解

一、什么是echartdatazoom

Echartdatazoom是一个用于数据区域缩放和漫游的接口组件，可在ECharts中提供数据区域缩放、漫游等交互功能。通过数据区域的缩放和漫游功能，用户可以更加方便的浏览大量数据，快速定位关注区间，更全面准确地观察数据趋势，提升数据分析用户体验。

二、echartdatazoom的作用

echartdatazoom主要是用于在图表中进行数据区域的缩放和漫游。在进行大数据量的数据分析时，由于数据量的巨大，很多时候需要将某个特定区域进行放大，或者是整个数据区域进行漫游，这时使用echartdatazoom则可以轻松实现数据的快速定位和查询。

三、如何配置echartdatazoom

在ECharts中，通过配置xAxis或yAxis的axisType为’value’，并在dataZoom内开启即可使用数据区域缩放和漫游功能。

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            type: 'value',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            data: ['a', 'b', 'c', 'd', 'e']
        },
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: 0,
                start: 50,
                end: 100
            },
            {
                type: 'slider',
                yAxisIndex: 0,
                start: 30,
                end: 80
            }
        ],
        series: [{
            data: [10, 20, 30, 40, 50, 60, 70],
            type: 'line'
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

四、echartdatazoom的常见类型

目前，ECharts中主要有四种类型的echartdatazoom：

1、slider：滑动条型数据区域缩放和漫游组件，可以水平或垂直放置，通过拖拽或点击的方式调整区域范围。

2、inside：内置型数据区域缩放和漫游组件，一般跟别的坐标系组件（比如geo、polar等）一起使用，可以通过鼠标滚轮或两指缩放进行缩放，通过鼠标拖拽进行漫游。

3、select：行列选择型组件，使用鼠标框选的方式进行数据区域选择，效果类似于brush。

4、toolbox：工具箱型数据区域缩放和漫游组件，可以通过toolbox中的toolbox.dataZoomInside和toolbox.dataZoomSlider等配置项开启相应的功能，并可通过toolbox.iconStyle中的emphasis来设置高亮时的图标样式。

五、echartdatazoom的联动

在ECharts中，可以将多个图表组合在一起，实现联动的效果。在联动时，只需要将多个图表的dataZoom中共用一个instanceId即可。具体配置如下：

    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));

    // 指定图表的配置项和数据
    var option1 = {
        xAxis: {
            type: 'value',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            data: ['a', 'b', 'c', 'd', 'e']
        },
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: 0,
                start: 50,
                end: 100,
                dataBackground: {
                    areaStyle: {
                        color: 'rgba(255,255,255,0.2)'
                    },
                    lineStyle: {
                        opacity: 0.8,
                        color: '#8392A5'
                    }
                },
                fillerColor: 'rgba(255,255,255,0.2)',
                handleStyle: {
                    color: 'rgba(255,255,255,0.9)'
                }
            }
        ],
        series: [{
            data: [10, 20, 30, 40, 50, 60, 70],
            type: 'line'
        }]
    };

    var option2 = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: 0,
                start: 50,
                end: 100,
                dataBackground: {
                    areaStyle: {
                        color: 'rgba(255,255,255,0.2)'
                    },
                    lineStyle: {
                        opacity: 0.8,
                        color: '#8392A5'
                    }
                },
                fillerColor: 'rgba(255,255,255,0.2)',
                handleStyle: {
                    color: 'rgba(255,255,255,0.9)'
                }
            }
        ],
        series: [{
            data: [10, 20, 30, 40, 50, 60, 70],
            type: 'bar'
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
    myChart2.setOption(option2);

    // 设置两个图表联动
    myChart1.on('dataZoom', function (params) {
        if (params.batch) {
            myChart2.dispatchAction({
                type: 'dataZoom',
                batch: true,
                start: params.start,
                end: params.end
            });
        } else {
            myChart2.dispatchAction({
                type: 'dataZoom',
                start: params.start,
                end: params.end
            });
        }
    });

    myChart2.on('dataZoom', function (params) {
        if (params.batch) {
            myChart1.dispatchAction({
                type: 'dataZoom',
                batch: true,
                start: params.start,
                end: params.end
            });
        } else {
            myChart1.dispatchAction({
                type: 'dataZoom',
                start: params.start,
                end: params.end
            });
        }
    });

六、总结

echartdatazoom是ECharts中非常实用的一个组件，通过它的数据区域缩放和漫游功能，可以方便地进行大量数据的快速定位和查询。在使用echartdatazoom时，需要注意其常见类型和联动的配置，以此提升数据分析的效率和精度。