echarts toolbox自定义全屏功能

我是结合Element的el-dialog组件做的一个全屏功能。

Element、echarts版本

"echarts": "^5.3.1",
"element-ui": "^2.15.6",

父组件：

<template>
	<div>
		//用的比较多，这里就拿出来封装了一下el-dialog组件
		<Dialog ref="echartFull"></Dialog>
		//封装的图表
		<Bar></Bar>
	</div>
</template>
<script>
	import Bar from '@/components/Chartes/Bar'
	import Dialog from '@/components/Dialog'
	export default {
		components:{
			Bar,Dialog 
		},
	}
</script>

子组件1：Dialog弹窗

<template>
	<!-- //弹窗 -->
	<el-dialog width="90%" :modal="true" :title="title" append-to-body :visible.sync="dialogVisible" :lock-scroll="false" :modal-append-to-body="false" @close="close">
		<div id="dialogChart" :style="{height:height,width:width}" ></div>
	</el-dialog>
</template>
<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				dialogVisible: false,
				title: 'dialog测试',
				width: '100%',
				height: '847px',
				// chartBoxId:'',
			}
		},
		methods: {
			show(title, val, id) {
				// title：弹出框 标题说明
				// val：echart的option数据
				// id：自定义 id
				this.dialogVisible = true;
				this.$nextTick(() => {
					//注意echarts安装方式，安装方式不同初始化“方式”有点不同；
					//let echart = this.$echarts.init(document.getElementById('dialogChart'))
					let echart = echarts.init(document.getElementById('dialogChart'))
					val.toolbox[0].feature.myTool.show = false;
					echart.setOption(val)
					//图表大小自适应
					window.addEventListener('resize', () => {
						echart.resize()
					})
				})
			},
			close(){
				// console.log('关闭id')
			},
		},
	}
</script>
<style>
	#dialogChart>div {
		width: 100%;
		height: 500px;
	}
</style>

子组件2：Bar图表

<template>
	<div  class="content">
		<div id="chart_bar1"  :style="{height:height,width:width}"/>
	</div>
</template>
<script>
	import * as echarts from 'echarts';
	import { getRisWeek } from "@/api/hospital"
	import { getBeforeDates } from "@/utils/time";
	import icon from "@/assets/image/q.svg";
	export default {
		props: {
			hospitalId: {
				type: String,
			}
		},
		data: function() {
			return {
				options: {},
				myChart:{},
				width:'100%',
				height: '100%'
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init(timeArr, yArr) {
				this.myChart = echarts.init(document.getElementById('chart_bar1'));
				this.options = {
					title: {
						text: '洁净手术室',
						// subtext: 'Fake Data'
						textStyle: {
							fontSize: 32
						}
					},
					tooltip: {
						trigger: 'axis',
						textStyle: {
							fontSize: 24
						},
						// 鼠标移上去窗口样式
						extraCssText: 'width:auto;height:auto;line-height:30px;font-size:24px;padding:10px;'
					},
					grid: {
						top: '20%',
						left: '2%',
						right: '4%',
						bottom: '20%',
						// borderColor: "#012f4a",
						containLabel: true,
						shadowColor: false,
					},
					legend: {
						data: ['洁净合格', '洁净缺陷', '洁净失败'],
						// icon: "circle", // 修改形状
						// itemHeight: 36, // 修改icon图形大小
						//itemGap: 24, // 修改间距
						//textStyle: {
							//fontSize: 24
						//},
					},
					//图标工具栏
					toolbox: {
						show: true,
						feature: {
							dataView: { show: true, readOnly: false },
							magicType: { show: true, type: ['line', 'bar'] },
							restore: { show: true },
							saveAsImage: { show: true },
							/**
							 自定义工具按钮
							 注意：自定义的工具名字，只能以 my 开头，例如下例中的 myTool
							*/
							myTool: {
								show: true,
								title: '全屏',
								//本地icon
								//icon:'image://'+icon,
								//线上icon
								//icon: 'image://http://www.yuzhikejiyl.com/mim-monitor/static/img/calendar.4fc78df7.svg',
								//这个地址是svg文件里的path，格式：path://+svg的path
								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) => {
									//注意我这里ref的层级，我是先找的父级，然后再去找的Dialog组件的echartFull；层级不对是会出错的。
									this.$parent.$refs.echartFull.show("", e.getOption(), "chart_line2");
								}
							}
						}
					},
					calculable: true,
					xAxis: [{
						type: 'category',
						// prettier-ignore
						data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
						axisLabel: {
							fontSize: 24
						},
						lineStyle: {
							normal: {
								width: 8
							}
						}
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							fontSize: 24
						},
						lineStyle: {
							normal: {
								width: 8
							}
						}
					}],
					series: [{
							name: '洁净合格',
							type: 'bar',
							data: [
								2, 9, 7, 23, 25, 76, 135, 162, 32, 20, 6, 3
							],
							label: {
								show: true,
								position: 'top',
								textStyle: {
									fontSize: 24
								}
							},
							lineStyle: {
								normal: {
									width: 4
								}
							}
						},
						{
							name: '洁净缺陷',
							type: 'bar',
							data: [
								2, 5, 9, 2, 28, 70, 175, 182, 48, 18, 6, 2
							],
							label: {
								show: true,
								position: 'top',
								textStyle: {
									fontSize: 24
								}
							},
							lineStyle: {
								normal: {
									width: 4
								}
							}

						},
						{
							name: '洁净失败',
							type: 'bar',
							data: [
								6, 9, 0, 2, 8, 7, 1, 12, 4, 1, 6, 2
							],
							label: {
								show: true,
								position: 'top',
								textStyle: {
									fontSize: 24
								}
							},
							lineStyle: {
								normal: {
									width: 4
								}
							}

						}
					]
				};
				this.myChart.setOption(this.options);
			},
		}
	}
</script>
<style scoped>
	.content {
		padding: 20px;
		width: 100%;
		height: 447px;
	}
</style>

效果：

附怎么找图片的path ,下面是svg里的path