Echarts全屏功能

原创已于 2024-12-03 17:05:20 修改

· 535 阅读

6 ·

版权

文章标签：

#echarts #javascript #前端

于 2024-12-03 16:58:36 首次发布

增加到图标工具里

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/logo.png"),
      onclick: () => {
        const element = document.getElementById("main2");
        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();
        }
      },
    },
  },
},