Echarts 图表全屏显示

技术栈版本

“vue”: “^2.6.11”,
“echarts”: “^5.2.1”,

第一种方案

实现思路

1，在echart的工具栏 ，toolbox添加自定义图标全屏按钮事件。

实现步骤

            toolbox: {
            //
              show: false,
              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: () => {
                    this.fullFlag = true;
                    let element = document.getElementById("chartsMax");

                    // 一些浏览器的兼容性
                    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();
                    }
                  },
                },
              },
            },

弊端

页面重绘的问题（非正常退出会导致页面变形，不可控）

第二种方案

实现思路

写一个全屏的eCharts图，点击全屏展示，退出隐藏。各种交互父子传值

实现步骤

       ...     (和小屏一样的写法，注意 v-show 和 v-if 的区别)