echarts自定义全屏弹窗

项目场景：

公司项目中，提出在echarts表格的工具栏上，添加一个全屏按钮，点击可以弹出对应图表的全屏放大显示。
对于这个功能，简单的可以直接对所在的div容器增加一个按钮，点击后调用浏览器自带的全屏即可。但是这种方式不太方便嵌入到echarts的toolbox工具组件中，而且全屏显示的效果不太好。下面介绍一下toolbox自定义全屏控件的方式。

---

一、自定义全屏工具

在lineChart.js文件中先定义绘制echarts图表的方法，并在setOption配置中自定义全屏工具：

// 折线图显示数据
linechartCur.setOption({
  // 由于公司项目需要绘制多个图表
  // 所以需要给每个图表配置项赋予一个id
  id: index,
  tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%'];
    }
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: false
      },
      saveAsImage: {
        pixelRatio: 2
      },
      myFull: {
        show: true,
        title: "全屏",
        // icon后面跟着svg的图片地址，这个引用方式网上资料很多，不予赘述
        icon: 'path://...',
        onclick: (e) => {
          // 这里的openDialog是传入方法中的点击事件，具体实现放在调用这个方法的vue页面中
          if(openDialog !== undefined) {
            // 传入对应事件的id
            // 由于这个自定义工具是在图表加载后渲染上去的
            // 所以采用调用外部点击事件来实现
            openDialog(e.option.id)
          }
        },
      },
    }
  },
  dataZoom: [
    {
      type: 'inside',
      start: 3,
      end: 67
    },
    {
      start: 0,
      end: 10
    }
  ],
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: xAxisData
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%']
  },
  visualMap: {
    // 可视化
    top: 0,
    left: 0,
    text:['Danger', 'Safe'],
    pieces: [
      {
        gt: 0,
        lte: 20,
        color: '#93CE07'
      },
      {
        gt: 20,
        lte: 40,
        color: '#0000FF'
      },
      {
        gt: 40,
        lte: 60,
        color: '#FFFF00'
      },
      {
        gt: 60,
        lte: 80,
        color: '#FC7D02'
      },
      {
        gt: 80,
        color: '#FD0100'
      }
    ],
    outOfRange: {
      color: '#999'
    }
  },
  series: [
    {
      data: yAxisData,
      type: 'line',
      showSymbol: false,
    }
  ],
  title: [
    {
      left: 'center',
      text: `${containerAttr[index].name}`
    }
  ]
})

---

二、vue页面调用绘制图表方法

首先，使用element-ui的el-dialog组件展示图表的全屏弹窗，并在methods中自定义全屏按钮点击事件，传入到方法中触发并执行。

<!-- 图表全屏弹窗 -->
<template>
	<div>
		...
		<el-dialog width="80%" v-if="dialogVisible" :visible.sync="dialogVisible" :destroy-on-close="true" style="overflow:hidden;">
		    <div class="dlg" style="width:100%;height:55vh;overflow:hidden;" />
		</el-dialog>
	</div>
</template>

<script>
import lineChart from '@/utils/chartList/lineChart'

export default {
	...
	data() {
		return {
			// 是否打开弹窗
			dialogVisible: false
		}
	}
	methods: {
		async openDialog(id) {
			// 打开/关闭图表全屏弹窗
      		this.dialogVisible = true
      		// 这里是多个图表的选择
      		var dialogContainer = JSON.parse(JSON.stringify(this.containerAttrCurrent))
      		// 根据id，确定点击全屏后显示的是哪个图表
      		for (var i = 0, len = dialogContainer.length; i < len; ++i) {
        		if (id === i) {
          			dialogContainer[i].isShow = true
        		} else {
          			dialogContainer[i].isShow = false
        		}
      		}
      		// 第一个参数为弹窗容器的id
      		// 第二个参数为图表的相关信息
			await lineChart.drawLineChart("dlg", dialogContainer)
	}
}
</script>

---

三、最终效果

未点击前网页效果：

点击后全屏弹窗：

---

四、注意

1. toolbox自定义工具的名字开头必须以“my”开头；
2. 单个图表的参数设计比较简单，对于多个图表的，需要根据class动态选择（公司项目的最终需求…）；
3. 如果需要的是充满整个屏幕的全屏效果，可以参考下面的代码：

myFull: {
  show: true,
  title: "全屏",
  icon: 'path://...',
  onclick: (e) => {
  	const element = document.getElementById('dlg')
    // 一些浏览器的兼容性
    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()
    }
  },
},