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

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

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


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


这是全屏事件监听。

相关文章
|
算法 Windows
Winform控件优化之实现无锯齿的圆角窗体(或任意图形的无锯齿丝滑的窗体或控件)【借助LayeredWindow】
在一般能搜到的所有实现圆角窗体的示例中,都有着惨不忍睹的锯齿...而借助于Layered Windows,是可以实现丝滑无锯齿效果的Form窗体的,其具体原理就是分层窗体....
1647 0
Winform控件优化之实现无锯齿的圆角窗体(或任意图形的无锯齿丝滑的窗体或控件)【借助LayeredWindow】
|
1月前
|
JavaScript
avaScript如何实现 选项卡功能
avaScript如何实现 选项卡功能
19 1
|
3月前
|
安全 BI UED
分享一个在 WinForm 桌面程序中使用进度条展示报表处理进度的例子,提升用户体验
分享一个在 WinForm 桌面程序中使用进度条展示报表处理进度的例子,提升用户体验
|
3月前
|
开发框架 前端开发 搜索推荐
在WInform开发中实现工具栏/菜单的动态呈现
在WInform开发中实现工具栏/菜单的动态呈现
|
前端开发 定位技术
Echarts地图高级开发:下钻交互菜单操作按钮(1)
Echarts地图高级开发:下钻交互菜单操作按钮(1)
119 0
|
算法 API C#
Winform控件优化之圆角按钮【各种实现中的推荐做法】(下)
最终优化实现ButtonPro按钮(继承自Button),既提供Button原生功能,又提供扩展功能,除了圆角以外,还实现了圆形、圆角矩形的脚尖效果、边框大小和颜色、背景渐变颜色...
1947 0
Winform控件优化之圆角按钮【各种实现中的推荐做法】(下)
|
数据可视化 JavaScript 前端开发
前端可视化大屏设置全屏模式方法
前端可视化大屏设置全屏模式方法
前端可视化大屏设置全屏模式方法
|
C# 图形学 Windows
Winform控件优化之圆角按钮【各种实现中的推荐做法】(上)
Windows 11下所有控件已经默认采用圆角,其效果更好、相对有着更好的优化...尝试介绍很常见的圆角效果,通过重写控件的OnPaint方法实现绘制,并在后面进一步探索对应的优化和可能的问题
1414 0
Winform控件优化之圆角按钮【各种实现中的推荐做法】(上)
|
SQL JavaScript 前端开发
【自然框架】之鼠标点功能现(二):表单控件的“应用”—— 代码?只写需要的!
  【自然框架】之鼠标点功能现(一):单表的增删改查(即上次5月23日活动的一个主题)【Demo、源码下载】           看了大家的回复,好像不少人误会了,我为了突出“鼠标点,功能现”,所以没有说代码,没有贴代码,这就让一些人认为我想要完全抛弃VS,自己写一个“平台”来代替,不好意思,您高估我了,我可达不到。
865 0