编程知识 cdmana.com

echarts自定义全屏按钮

toolbox: { //工具栏
          show: true,
          right:'20%',
          iconStyle: {
            borderColor: "#03ceda"
          },
          itemSize: 30,
          feature: {
            saveAsImage: {
              icon:'image://'+require('../assets/images/download_icon.png'),
              title:'下载',
              iconStyle:{

              },
              pixelRatio: 1
            },
            myFull: {
              show: true,
              title: '全屏查看',
              icon: 'image://'+require('../assets/images/full_icon.png'),
              onclick: () => {
                const element = document.getElementById('demoChart');
                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();
                }
              },
            }
          }
        },

全屏后背景颜色变为黑色,可通过css设置改变背景颜色

#demoChart:fullscreen  {
   background-color #fff ;
}
 
#demoChart:-webkit-full-screen  {
   background-color #fff ;
}
 
#demoChart:-moz-full-screen  {
   background-color #fff ;
}

版权声明
本文为[why2016]所创,转载请带上原文链接,感谢
https://my.oschina.net/huashijun/blog/4714787

Scroll to Top