tab切换 echarts图表消失

最新推荐文章于 2024-06-01 09:13:18 发布

无·糖

最新推荐文章于 2024-06-01 09:13:18 发布

阅读量1.7k

点赞数 57

分类专栏： Vue 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_58648235/article/details/127532767

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章讲述了在Vue项目中，由于tab切换时DOM节点未加载导致Echarts图表无法渲染的问题，提出使用`this.$nextTick()`确保在DOM更新后再初始化图表的方法。

摘要由CSDN通过智能技术生成

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>