除了图表外 ECharts 中，提供了很多交互组件。例如：

legend、标题组件 、视觉映射组件 visualMap、数据区域缩放组件 、时间线组件 timeline

下面以 为例，介绍如何加入这种组件。

『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。dataZoom 组件能够在直角坐标系（grid）、极坐标系（）中实现这一功能。

如下例子： https://echarts.baidu.com/gallery/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1“

• dataZoom 组件是对 数轴（axis） 进行『数据窗口缩放』『数据窗口平移』操作。

• 数据过滤模式的设置不同，效果也不同，参见：。

• dataZoom 的数据窗口范围的设置，目前支持两种形式：

  • 绝对数值形式：参见 dataZoom.startValue 和 。

dataZoom 组件现在支持几种子组件：

• 内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中。

• ：全屏的选框进行数据区域缩放。入口和配置项均在 toolbox中。

在代码加入 dataZoom 组件

先只在对单独一个横轴，加上 dataZoom 组件，代码示例如下：

可以看到如下结果： https://echarts.baidu.com/gallery/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1

上面的图只能拖动 dataZoom 组件导致窗口变化。如果想在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放，那么要再加上一个 inside 型的 dataZoom组件。直接在上面的 option.dataZoom 中增加即可：

可以看到如下结果（能在坐标系中进行滑动，以及使用滚轮缩放了）：

如果想 y 轴也能够缩放，那么在 y 轴上也加上 dataZoom 组件：