echart 全屏遇到的坑

1,968 阅读1分钟

今天我们潘霸霸要求做一个echart的全屏功能 一想很简单 立刻答应下来 却被搞了一早上 话不多说上码

        let element = document.getElementById('newmain');
        
              // element.getElementsByTagName("canvas")[0].style.width='100%'
              // element.getElementsByTagName("canvas")[0].style.height='100%'
              element.getElementsByTagName("canvas")[0].style.background='white'
          if (element.requestFullScreen) { // HTML W3C 提议
            element.requestFullScreen();
          } else if (element.msRequestFullscreen) { // IE11
            element.msRequestFullScreen();
          } else if (element.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) { // Firefox (works in nightly)
            element.mozRequestFullScreen();
          }
          // 退出全屏
          if (element.requestFullScreen) {
            document.exitFullscreen();
          } else if (element.msRequestFullScreen) {
            document.msExitFullscreen();
          } else if (element.webkitRequestFullScreen) {
            document.webkitCancelFullScreen();
          } else if (element.mozRequestFullScreen) {
            document.mozCancelFullScreen();
          }

全屏是很简单的全屏 效果也是很难受的效果

全屏是全屏了 为啥宽度还是这么个鸟样 当我费劲苦心 搞七搞八才发现

           window.onresize = function(){
              myChart.resize()
            }

加这么一句就完事了呀~难受啊~