tab切换 echarts图表消失

tab切换 echarts图表消失

原因分析：当在从第二个tab切换到第一个tab 的时候，此时渲染图表是不成功的，可以在点击到tab 的时候打印一下当时的dom节点，就会发现此时dom为null，因此无法对配置项进行渲染。

解决方案：需要在渲染配置之前先获取到这个dom节点，可以通过 this.$ nextTick()来获取到节点，将echarts的渲染放在this.$nextTick()中，就可以获取到dom了。

<template>
	<div v-if="selected == 'ip' " class="reason-detail">  //这个是我的第一个tab
		111
		//图表
        <div id="ipTop" style="width:100%; height:400px;marginTop:16px;display:flex;"></div>
	</div>
	<div v-if="selected == 'terminal' " class="reason-detail"> //这个是我的第一个tab
	    222
	</div>
</template>

<script>
export default {
	data(){
		retrun {
			selected: 'ip',
		}
	}
	methods:{
		initIpTopCharts(){},   //用于配置生成echarts图表
		
		//tab切换
		changeReason(selected) {
	      this.selected = selected;
	      this.$nextTick(() => {
	         selected == 'ip' ? this.initIpTopCharts() : ''  //重点在这$nextTick
	      });
	    },
	}
}
</script>