vue+echarts解决图表切换的自适应问题

核心解决方法
v-if:创建销毁dom元素
$nextTick():在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。

<button type="button" @click="change">切换1/2</button>
<Mychart1 v-if="flag" ref="main1"></Mychart1>
<Mychart2 v-if="!flag" ref="main2"></Mychart2>

Vue.component('Mychart1',{
	template:'<div style="width: 100%;height:100%;"></div>',
})
Vue.component('Mychart2',{
	template:'<div style="width: 100%;height:100%;"></div>',
})
mounted(){
	//基于准备好的dom，初始化echarts实例
	var myChart1=echarts.init(this.$refs.main1.$el);
	//使用刚指定的配置项和数据显示图表
	myChart1.setOption(this.option1);
	//echarts官网自适应的方法
	window.addEventListener('resize',()=>{
		myChart1.resize();
	})
},
methods: {
		change() {//切换的方法
			var that=this;
			that.flag = !that.flag;
			if(that.flag){
				that.$nextTick(()=>{
					var myChart1 = echarts.init(that.$refs.main1.$el);
					// var myChart1 = echarts.init(document.getElementById("main1"));
					myChart1.setOption(that.option1);
					window.addEventListener('resize',()=>{
						myChart1.resize();
					})
				})
			}else{
				that.$nextTick(()=>{
					var myChart2 = echarts.init(that.$refs.main2.$el);
					// var myChart2= echarts.init(document.getElementById("main2"));
					myChart2.setOption(that.option2);
					window.addEventListener('resize',()=>{
						myChart2.resize();
					})
				})
			}
		}
	}