echart实现全屏显示功能

echart实现全屏显示功能：

工具栏添加全屏按钮，点击全屏显示图表：

---

解决方案：

html代码

<div class="full_screen" id="fullScreen" v-if="isFullScreen">
</div>

mounted

 mounted() {
    document.addEventListener('fullscreenchange',()=>{
        let winFlag = window.innerHeight === window.screen.height
      // 利用window全屏标识来判断 -- IE无效
        let isFull = window.fullScreen || document.webkitIsFullScreen
        this.isFullScreen=winFlag
    })

echart的option配置

toolbox:{
   show:true,
   right:'80px',
   feature: {
       // dataView: { //数据视图
       //     show: true
       // },
       // dataZoom: { //数据缩放视图
       //     show: true
       // },
       saveAsImage: {//保存图片
           show: true
       },
       //自定义toolbox，必须以my开头
       myFullScreen:{
           show:true,
           title:that.isFullScreen?'退出全屏':'全屏显示',
           //icon从阿里图标复制对应的svg格式代码
           icon:"path://M368.896 192H224a32 32 0 0 0-32 32v137.888a32 32 0 0 0 64 0V256h112.896a32 32 0 0 0 0-64zM784.864 192H640a32 32 0 1 0 0 64h112.864v105.888a32 32 0 1 0 64 0V224a32 32 0 0 0-32-32zM368.896 777.92H256V672a32 32 0 1 0-64 0v137.92a32 32 0 0 0 32 32h144.896a32 32 0 1 0 0-64zM784.864 640a32 32 0 0 0-32 32v105.92H640a32 32 0 1 0 0 64h144.864a32 32 0 0 0 32-32V672a32 32 0 0 0-32-32z",
           onclick: function (e){
           		//isFullScreen定义在data中，初始化为false
               that.isFullScreen=!that.isFullScreen
               if(that.isFullScreen){
                   that.$nextTick(()=>{
                       that.drawEchart(that.fullScreenEchartData,'fullScreen')
                   })
               }
               setTimeout(()=>{
                   let element=document.getElementById('fullScreen')
                   if(element.requestFullscreen){
                       element.requestFullscreen()
                   }else if(element.msRequestFullscreen){
                       element.msRequestFullscreen()
                   }else if(element.webkitRequestFullScreen){
                       element.webkitRequestFullScreen()
                   }else if(element.mozRequestFullscreen){
                       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()
                   }
               },0)
               
           }
       }
   }
},

全屏css样式设置

.history_trend :-webkit-full-screen{
    background-color: white!important;
    width: 100%;
    height: 100%;
    padding-top: 100px;
    padding-left: 100px;
}
.history_trend :-moz-full-screen{
    background-color: white!important;
}
.history_trend :-ms-full-screen{
    background-color: white!important;
}
.history_trend :fullscreen{
    background-color: white!important;
}
.history_trend .dialog_wrapper .el-checkbox-group {
    width: 100%!important;
}