首页 前端知识 关于echarts图表全屏与缩放按钮 功能的实现

关于echarts图表全屏与缩放按钮 功能的实现

2024-04-15 21:04:45 前端知识 前端哥 546 809 我要收藏

全屏按钮实现:

let element = document.getElementById("container")
if(element.requestFullscreen){
	element.requestFullscreen()
	document.getElementById("container").style.position = "absolute"
}

element.requestFullscreen()可实现全屏,position = "absolute"解决esc退出全屏后图表外的容器错位与无背景色的问题

缩放按钮实现
首先在图表series里定义zoom:1 roam:true
添加 监听graphroam:

this.graphEchart.on('graphroam',function(params){
	if('zoom' in params){
		if(params.zoom > 1){
			this.zoom += 0.2
		}else{
			this.zoom -= 0.2
		}
	}
})

添加放大按钮事件:

this.zoom += 0.2
this,option.series[0].zoom = this.zoom
this.graphEchart.setOption(this.zoom)

添加缩小按钮事件:

this.zoom -= 0.2
this,option.series[0].zoom = this.zoom
this.graphEchart.setOption(this.zoom)
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5002.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!