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

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

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


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


这是全屏事件监听。

相关文章
|
5月前
|
前端开发 JavaScript 开发者
【QML进阶 进度条设计】打造动态弧形进度条特效
【QML进阶 进度条设计】打造动态弧形进度条特效
318 2
|
JavaScript
Fastadmin列表的多图预览(一行代码)
Fastadmin列表的多图预览(一行代码)
257 0
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
|
2月前
|
开发框架 前端开发 搜索推荐
在WInform开发中实现工具栏/菜单的动态呈现
在WInform开发中实现工具栏/菜单的动态呈现
|
前端开发 定位技术
Echarts地图高级开发:下钻交互菜单操作按钮(1)
Echarts地图高级开发:下钻交互菜单操作按钮(1)
111 0
|
5月前
|
前端开发
前端如何创建好看的简洁的蒙版弹窗
前端如何创建好看的简洁的蒙版弹窗
|
Python
PyQt5 图形界面 - 配置界面跟随窗口大小调整灵活伸缩,设置页面控件居中显示实例演示
PyQt5 图形界面 - 配置界面跟随窗口大小调整灵活伸缩,设置页面控件居中显示实例演示
997 0
|
数据可视化 JavaScript 前端开发
前端可视化大屏设置全屏模式方法
前端可视化大屏设置全屏模式方法
前端可视化大屏设置全屏模式方法
|
iOS开发
iOS开发 - 柱状图动态展现动画
iOS开发 - 柱状图动态展现动画
157 0
iOS开发 - 柱状图动态展现动画