Vue echart toolbox 工具栏点击 自定义全屏按钮 显示到弹出框中

最终效果

说明： 由于页面上的echart图表过多，写一个vue子组件，直接在父页面调取复用

安装插件

npm i echarts

在 main.js 中引用

import echarts from 'echarts'
Vue.prototype.$echarts = echarts	// 全局引用

子组件

<template>
  <el-dialog
    top="40px"
    width="50%"
    :modal="true"
    :title="title"
    append-to-body
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false">
    <div id="dialogBox"></div>
  </el-dialog>
</template>

<script>
export default {
	data () {
	    return {
	      dialogVisible: false,
	      title: ''
	    }
	},
	methods: {
		show(title, val, id) {
	    	// title：弹出框 标题说明
	    	// val：  父组件中 echart的option数据
	    	// id：   自定义 id
	      	this.dialogVisible = true
	      	this.title = title
			this.$nextTick(() => {
	        	const divBox = document.getElementById('dialogBox')
	       		if (divBox.children && divBox.children.length == 1) {
	          		divBox.removeChild(divBox.children[0])
	        	}
	        	const divChild = document.createElement('div')
	        	divChild.setAttribute('id', id)
	        	divBox.appendChild(divChild)
	        	const echart = this.$echarts.init(document.getElementById(id))
	        	val.toolbox[0].feature.fullButton.show = false
	        	echart.setOption(val)
	        	window.addEventListener('resize', () => {
	          		echart.resize()
	        	})
	        })
		}
	}
}
</script>

<style>
  #dialogBox>div {
    width: 100%;
    height: 400px;
  }
</style>

父组件

<template>
	<div id="lineEchart" style="height: 400px; widht: 800px;"></div>
	<echartFull ref="echartFull"/>
</template>

<script>
import echartFull from './echartFull'
export default {
	components: { echartFull },
	data() {
		return {
			color: ['#DF621E', '#009D4A', '#138AE6', '#C23531', '#2F4554', '#FFBA00', '#49D650', '#61A0A8', '#D48265', '#5860FF']
		}
 	}
	mouthed() {
	  	this.lineEchartFn()
	},
	methods: {
		lineEchartFn() {
      		const lineEchart= this.$echarts.init(document.getElementById('lineEchart'));
      		const option = {
				color: this.color,
        		tooltip: {
		         	trigger: 'axis',
		          	backgroundColor: 'rgba(255, 255, 255, .8)',
		          	borderWidth: 1,
		          	borderColor: '#DF621E',
		          	textStyle: {
		            	color: '#777'
		          	}
		        },
	        	grid: {
		          right: '6%',
		          bottom: '12%',
		          left: '8%',
		        },
		        legend: {
		          data: ['北京', '上海']
		        },
		        toolbox: {
		            show: true,
		            right: 20,
		            feature: {
		              fullButton: {
		                show: true,
		                title: '全屏查看',
		                icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
		                onclick: (e) => {
		                  this.$refs.echartFull.show('标题', e.getOption(), 'idName')
		                }
		              }
		            }
		        },
		        xAxis: {
		          type: 'category',
		          data: ['1990', '1991']
		        },
		        yAxis: [
		          {
		            name: '万吨',
		            type: 'value'
		          }
		        ],
		        series: [
		        	{
		            	name: '北京',
		            	type: 'line',
		            	data: [320, 332]
		        	},
		        	{
		            	name: '上海',
		            	type: 'line',
		            	data: [320, 332]
		        	}
		        ]
	      	}
	      lineEchart.setOption(option)
	      window.addEventListener('resize', () => {
	        lineEchart.resize()
	      })
		}
	}
}
</script>

扩展

$nextTick：
	在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。（自己理解：当数据更改完成，DOM更新完成，并且实例挂载完成，才会执行此函数）
createElement：
	创建一个新的  标签元素
setAttribute：
	添加指定的属性，并为其赋指定的值。如果这个指定的属性已经存在，则仅设置/更改值
appendChild：
	在节点内追加新的子节点
children：
	获取节点内有多少个子节点
removeChild：
	移除指定的子节点