本文首发自「慕课网」（imooc.com），想了解更多IT干货内容，程序员圈内热闻，欢迎关注"慕课网"或慕课网公众号！
作者：范文杰_fe|慕课网讲师
在一个数据图表中，可能由于数据所表示的时间范围较大，从而导致整个图表相当的长，当这些数据都不得不展示的时候，对我们分析某一段时间内数据的变化造成的极大的影响，所以当我们遇到这种情况的时候就需要用到 ECharts 的数据缩放组件了。
1. 简介
官方解释：
dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
慕课解释
dataZoom 组件提供了一套在图表运行状态下，终端用户可以通过鼠标、手指（触屏下）的动作触发图表视图窗口变化，使图表聚焦在某个局部区域的交互功能。dataZoom 有 3 个变种：
inside：内置于图表的缩放组件，用户可以在图表上直接操作缩放动作；
slider：独立与图表外的缩放组件，是三个变种中唯一具有视觉组件的类型，用户主要在滑块上实现交互；
select：框选模式，需要在 toolbox中配置使用。
2. 实例解析
原理上，dataZoom 通过控制坐标轴的数值范围实现图表视图窗口的变化，所以对于开发者来说，无论使用变种，最基本的需要确定 dataZoom 控制的是那个（或那些）数轴，以及对其他数轴的影响。
> **Tips**：
> dataZoom 只适用于直角坐标系、极坐标系，对于地图、日历坐标系等可考虑使用 [visualmap组件。
2.1 选定主轴
使用 dataZoom 的第一步是确定缩放组件要控制那一条坐标轴，方法很简单，在直角坐标系下通过设定xAxisIndex或 yAxisIndex为对应坐标轴下标；极坐标系下通过设定 radiusAxisIndex 或 angleAxisIndex为对应坐标轴下标即可。例如下例设定两个 dataZoom 实例并分别指向两个不同类型的坐标轴：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: 1020px; height: 400px;"></div>
<script s