ECharts提供很多交互组件：legend、title、visualMap、dataZoom、timeline

dataZoom

“概览数据整体，按需关注数据细节”是数据可视化的基本交互需求。dataZoom是数据区域缩放组件，能够在直角坐标系、极坐标系实现上述需求。

dataZoom组件可以对数轴进行“数据窗口缩放”与“数据窗口平移”操作。

dataZoom组件可以同时存在多个，起到共同控制的作用。控制同一个数轴组件，会自动联动。

dataZoom是通过“数据过滤”实现“数据窗口缩放”的效果。

dataZoom组件现在支持的子组件包括：dataZoomInside、dataZoomSlider、dataZoomSelect

option = {
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    dataZoom: [
        {   // 这个dataZoom组件，默认控制x轴。
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
        }
    ],
    series: [
        {
            type: 'scatter', // 这是个『散点图』
            itemStyle: {
                opacity: 0.8
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
        }
    ]
}

上面的图只能通过拖动dataZoom组件导致窗口变化。如果希望使用滚轮进行缩放，需要增加inside型的dataZoom组件

option = {
    ...,
    dataZoom: [
        {   // 这个dataZoom组件，默认控制x轴。
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
        },
        {   // 这个dataZoom组件，也控制x轴。
            type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
        }
    ],
    ...
}

如果希望y轴也能够缩放，可以在y轴增加dataZoom组件

option = {
    ...,
    dataZoom: [
        {
            type: 'slider',
            xAxisIndex: 0,
            start: 10,
            end: 60
        },
        {
            type: 'inside',
            xAxisIndex: 0,
            start: 10,
            end: 60
        },
        {
            type: 'slider',
            yAxisIndex: 0,
            start: 30,
            end: 80
        },
        {
            type: 'inside',
            yAxisIndex: 0,
            start: 30,
            end: 80
        }
    ],
    ...
}