Echarts学习笔记（Js）- 02
2021-01-21 本文已影响0人
大威锅丶
- 数据区域缩放组件（dataZoom）基本操作
官方教程地址入口- dataZoom 组件现在支持几种子组件：
-
内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中。
-
滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条操作。
-
框选型数据区域缩放组件（dataZoomSelect）：全屏的选框进行数据区域缩放。入口和配置项均在
toolbox中。
- 使用方法
-
在option中增加一个dataZoom，如果不指定坐标轴默认缩放为x轴，如下图
image.png
效果如下：
效果图
-
如果要达到鼠标滑轮滑动即实现图缩放的效果，在对应的坐标轴上同时加上slider和inside组件即可。（也可以自己通过xAxisIndex和yAxIndex参数指定，一个坐标轴同时有slider和inside两个组件就可以实现）
image.png
效果如下：
image.png
-
如果要达到鼠标滑轮滑动即实现图缩放的效果，在对应的坐标轴上同时加上slider和inside组件即可。（也可以自己通过xAxisIndex和yAxIndex参数指定，一个坐标轴同时有slider和inside两个组件就可以实现）
-
在option中增加一个dataZoom，如果不指定坐标轴默认缩放为x轴，如下图
