echarts图表全屏

最新推荐文章于 2024-07-23 17:42:36 发布

33455432

最新推荐文章于 2024-07-23 17:42:36 发布

阅读量673

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/weixin_38999134/article/details/120311207

版权

本文详细介绍了如何使用Echarts实现图表的全屏功能，包括配置项设置、全屏事件监听以及不同浏览器的全屏API兼容处理。通过对`toolbox`配置项的定制，实现了全屏按钮的展示和点击事件，触发图表元素的全屏显示和退出全屏操作。代码中还包含了窗口大小变化时图表的自动调整大小逻辑。

摘要由CSDN通过智能技术生成

toolbox:{
                show: true,
                feature: {
                  // dataView: { show: true },
                  // dataZoom: { show: true },
                  // restore: { show: true },
                  // saveAsImage: { show: true },
                  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.fullFlag = true
                      let element = document.getElementById('onejinshui');
                      // element.setOption(pacchartOption4);
                      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();
                      }
                    },
                  }
                }
              },

          this.pacchart= echarts.init(document.getElementById('onejinshui'));

        this.pacchart.setOption(pacchartOption4);

created(){
      this.rangeDate = this.timeDefault;
      let that = this
      window.onresize = function(){
        if(that.pacchart){
          that.pacchart.resize()
        }
        if(that.twojinshui){
          that.twojinshui.resize()
        }
        if(that.yuanshuichart){
          that.yuanshuichart.resize()
        }
        if(that.dixiashuichart){
          that.dixiashuichart.resize()
        }
      } 
    },

遍历图表全屏
 onclick: (e,index) => {
                        this.fullFlag = true
                        console.log('------',index.getDom())
                          const element = index.getDom()