- 数据区域缩放组件(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轴,如下图
Echarts学习笔记(Js)- 02
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 最近在实习期间,接手了一个数据搜索项目,需要我从后台调取数据,并将之用折线图直方图显示出来,并且可以将多组数据绘制...



