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

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

2024-04-15 21:04:45 前端知识 前端哥 556 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
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

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