这个功能很有意思,废话不多说,下面就由我为大家分析一下。
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('没有全屏') } }
这是全屏事件监听。