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

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

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


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('没有全屏')
  }
}


这是全屏事件监听。

相关文章
|
6月前
|
前端开发 JavaScript 开发者
【QML进阶 进度条设计】打造动态弧形进度条特效
【QML进阶 进度条设计】打造动态弧形进度条特效
367 2
|
6月前
|
Web App开发 前端开发 异构计算
前端如何实现网页变灰功能?
前端如何实现网页变灰功能?
116 0
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
|
3月前
|
安全 BI UED
分享一个在 WinForm 桌面程序中使用进度条展示报表处理进度的例子,提升用户体验
分享一个在 WinForm 桌面程序中使用进度条展示报表处理进度的例子,提升用户体验
|
3月前
|
开发框架 前端开发 搜索推荐
在WInform开发中实现工具栏/菜单的动态呈现
在WInform开发中实现工具栏/菜单的动态呈现
|
6月前
|
前端开发
前端如何创建好看的简洁的蒙版弹窗
前端如何创建好看的简洁的蒙版弹窗
|
C++ 计算机视觉 Python
Qt+C++自定义标题栏最大最小化关闭堆叠切换美化
这篇博客针对<<Qt+C++自定义标题栏最大最小化关闭堆叠切换美化>>编写代码,代码整洁,规则,易读。 学习与应用推荐首选。
114 0
|
Python
PyQt5 图形界面 - 配置界面跟随窗口大小调整灵活伸缩,设置页面控件居中显示实例演示
PyQt5 图形界面 - 配置界面跟随窗口大小调整灵活伸缩,设置页面控件居中显示实例演示
1095 0
|
数据可视化 JavaScript 前端开发
前端可视化大屏设置全屏模式方法
前端可视化大屏设置全屏模式方法
前端可视化大屏设置全屏模式方法
|
iOS开发
iOS开发 - 柱状图动态展现动画
iOS开发 - 柱状图动态展现动画
164 0
iOS开发 - 柱状图动态展现动画