核心解决方法
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();
})
})
}
}
}