el-dialog中echarts图表不显示的解决方案

前言

在vue的项目开发中，会有这样一种情况，我们需要在dialog中放置echarts图示，但是在上手的时候会发现，第一次打开dialog时图示不会显示，但是第二次打开之后就显示了

问题原因

按照代码逻辑，我们通常会这样写，我们会有一个控制Dialog的show变量，将他设成true，Dialog就展示出来了，展示之后，就去调用展示echarts图示的方法，虽然代码顺序是这样的，但是在vue底层，通过document.ElementById("id")获取DOM节点时，DOM节点还未生成，所以获取不到DOM节点，图表更不会显示，如果把展示echarts图的方法放在把变量设为true之前，也不可以，因为这个时候还没有dom节点，无法进行挂载，也不会显示，由于我们第一次打开Dialog之后，DOM节点生成完毕，所以第二次打开的时候图表就会显示

解决方案

1.我们可以使用vue中的nextTick方法，在dom元素进行更新后去调用它的回调方法，这样就可以正常展示了，注意一定要在控制dialog的布尔值变为true后调用nextTick，这样才能顺利获取到DOM

// 弹框的触发事件
showDialog() {
	this.isDialogShow = true;
	this.$nextTick(() => {
		let diameter= document.getElementById("diameter");//放置echarts图示的div的id
		let diameterOption = {...};
		echarts.init(diameter).setOption(diameterOption);
	})
}

2.获取元素时通过this.$refs.name去获取DOM元素

// 弹框的触发事件
showDialog() {
	this.isDialogShow = true;//展示弹窗
		let diameter= this.$refs.diameter//放置echarts图示的div的ref值
		let diameterOption = {...};
		echarts.init(diameter).setOption(diameterOption);
}