怎样实现单个图表全屏功能?

简介: 怎样实现单个图表全屏功能?

这个功能很有意思,废话不多说,下面就由我为大家分析一下。


1.给单块图表绑定一个点击事件;


2.然后设置一个全屏容器,通过点击全屏按钮,打开这个容器;


3.初始化图表,将图表放入到这个容器中,进行配置。


4.在全屏事件外添加全屏事件监听,来获取当前页面是否处于全屏状态;


5.if判断,如果处于全屏图表全屏,如果不处于全屏,在提前设置好的全屏容器销毁。

以上就是我的实现思路,大家如果有用到的可以去尝试一下。

//监听退出全屏
window.onresize = function (){
  console.log(132);
  var isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
  if(isFull){
    console.log('全屏')
  } else{
      console.log('没有全屏')
  }
}


这是全屏事件监听。

目录
打赏
0
2
2
0
29
分享
相关文章
如何修改Vscode查看源代码管理版本变动文件的查看方式
这篇文章介绍了如何在VSCode中通过源代码管理插件修改查看源代码版本变动文件的方式,提供了树形视图和列表视图两种查看方法,并说明了如何通过设置选项来切换查看方式,帮助用户根据自己的喜好更高效地查看和管理代码变动。
如何修改Vscode查看源代码管理版本变动文件的查看方式
Dify-生成式 AI 应用创新引擎,本地搭建以及使用
Dify-生成式 AI 应用创新引擎,本地搭建以及使用
4027 1
OpenCV 库创建了一个简单的动画
OpenCV 库创建了一个简单的动画
137 2
kde
|
7天前
|
Docker镜像加速指南:手把手教你配置国内镜像源
配置国内镜像源可大幅提升 Docker 拉取速度,解决访问 Docker Hub 缓慢问题。本文详解 Linux、Docker Desktop 配置方法,并提供测速对比与常见问题解答,附最新可用镜像源列表,助力高效开发部署。
kde
4372 10
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
723 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问