使 ECharts.js 全屏显示

Question

I have been trying to reproduce this Highcharts.js functionality in Echarts.js to make a plot full screen: https://www.highcharts.com/demo/line-basic .

Note that by clicking on the top right button you can select a full screen mode, which can then be disabled by pressing Esc.

I have tried creating a custom button in Echarts.js like this one in Highcharts https://jsfiddle.net/BlackLabel/1ga2fqL0/ without much success:

btn.addEventListener('click', function() {
  Highcharts.FullScreen = function(container) {
    this.init(container.parentNode); // main div of the chart
  };

  Highcharts.FullScreen.prototype = {
    init: function(container) {
      if (container.requestFullscreen) {
        container.requestFullscreen();
      } else if (container.mozRequestFullScreen) {
        container.mozRequestFullScreen();
      } else if (container.webkitRequestFullscreen) {
        container.webkitRequestFullscreen();
      } else if (container.msRequestFullscreen) {
        container.msRequestFullscreen();
      }
    }
  };
  chart.fullscreen = new Highcharts.FullScreen(chart.container);
})

Any ideas?

Answer 1

function GoInFullscreen(element) {
        if (element.requestFullscreen)
            element.requestFullscreen();
        else if (element.mozRequestFullScreen)
            element.mozRequestFullScreen();
        else if (element.webkitRequestFullscreen)
            element.webkitRequestFullscreen();
        else if (element.msRequestFullscreen)
            element.msRequestFullscreen();
    }
 function GoOutFullscreen() {
        if (document.exitFullscreen)
            document.exitFullscreen();
        else if (document.mozCancelFullScreen)
            document.mozCancelFullScreen();
        else if (document.webkitExitFullscreen)
            document.webkitExitFullscreen();
        else if (document.msExitFullscreen)
            document.msExitFullscreen();
    }
function IsFullScreenCurrently() {
        var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;

        // If no element is in full-screen
        if (full_screen_element === null)
            return false;
        else
            return true;
    }
 function setFullScreenToolBox(divname, idchart) {
        var classold = document.getElementById(divname).className;
        var idold = document.getElementById(idchart);
        if (classold == 'col-md-12') {
            document.getElementById(divname).className = "col-md-6";
            if (IsFullScreenCurrently())
                GoOutFullscreen();
            idold.style = 'height:300px';
        }
        else if (classold == 'col-md-6') {
            document.getElementById(divname).className = "col-md-12";
            //idold.style = 'height:500px';
            var heights = screen.height;// window.innerHeight;
            idold.style.height = heights -100 + "px";                
            GoInFullscreen($("#" + divname).get(0));
        }
        
      

        return true;
    }

My chart

toolbox: {
    feature: {
        magicType: {
            type: ['line', 'bar'],
            title: {
                line: 'line',
                bar: 'bar'
            },
        },
        saveAsImage: {
            show: true,
            title: 'Save Image',
            pixelRatio: 3
        },
        myTool: { //Custom tool myTool 
            show: true,
            title: 'Full screen',
            icon: 'image://img/fullscr.png',
            onclick: function() {
                setFullScreenToolBox('divdtngay', 'iddoanhthungay');
                setTimeout(function() {
                    stackedPointerArea_dt.resize();
                }, 500);
            }
        }
    }
},