【echarts】toolbox全屏显示

方案一:F11式的全屏

自定义toolbox工具:

 toolbox:{
            show: true,
            feature: {
              myFull: {
                show: true,
                title: '全屏查看',
                icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
                onclick: (e) => {
                  const element = document.getElementById('myChart');
                  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();
                  }
                },
              }
            }
          },

方案二:自定义大小的全屏

<div class="full_screen" id="fullScreen" v-show="fullFlag"></div>

fullFlag:false,
fullChart:null,

toolbox: {
 show: true,
  feature: {
   myFull: {
      show: true,
      title: '全屏查看',
      icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
     onclick: (e) => {
        this.showFullScreen(e.getOption())
      },
    }
  }
},



showFullScreen(option) {
 if (this.fullFlag) {
   this.fullFlag = false
   this.fullChart = null
 } else {
   this.fullFlag = true
   let dom=document.getElementById("fullScreen")
   dom.style.width=window.innerWidth+'px'
   dom.style.height=window.innerHeight+'px'
   this.fullChart = echarts.init(dom)
   this.fullChart.setOption(option)
   window.addEventListener("resize", function () {
     this.fullChart.resize()
   })
 }

你可能感兴趣的:(前端可视化,前端,echarts,全屏)