关于前端全屏展示echarts图表的自适应

首先用点击事件开启或关闭全屏模式

// 开启或关闭全屏的点击事件
 switchScreen() {
    if( document.fullscreen 
         || document.mozFullScreen 
         || document.webkitIsFullScreen 
         || document.webkitFullScreen 
         || document.msFullScreen ){
         this.exitScreen()
     } else {
         this.fullScreen()
     }
 },
 //全屏事件
 fullScreen() {
     var el = document.documentElement;
     var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
     if (typeof rfs != "undefined" && rfs) {
         rfs.call(el);
     };
 },
 //退出全屏
 exitScreen() {
     if (document.exitFullscreen) {
         document.exitFullscreen();
     }
     else if (document.mozCancelFullScreen) {
         document.mozCancelFullScreen();
     }
     else if (document.webkitCancelFullScreen) {
         document.webkitCancelFullScreen();
     }
     else if (document.msExitFullscreen) {
         document.msExitFullscreen();
     }
     if (typeof cfs != "undefined" && cfs) {
         cfs.call(el);
     }
 },
 

监听屏幕大小变化

// 这种方式能监听到 在全屏模式下 按Esc 退出全屏事件
created(){
                let that = this
                window.onresize = function(){
                  if(that.myChart){
                    that.myChart.resize()
                  }
              
                }
            },