- 数据区域缩放组件(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两个组件就可以实现)
image.png
-
在option中增加一个dataZoom,如果不指定坐标轴默认缩放为x轴,如下图
image.png
效果如下:
效果图
网友评论