echarts —— 显隐切换图表显示有误

记录项目中遇到的echarts显隐问题

一般vue显隐使用v-if/v-show，区别

• v-if: dom结构完全消失，v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件， 且运用比较灵活，配合v-if v-else使用，一般用于不会频繁切换显隐的时候使用；
• v-show：css方向的显隐，dom结构还在，只是样式添加display: none/block控制显隐；

综上所述切换echarts显隐或者切换不同图表时建议使用v-show

v-if 图表加载时不存在dom结构，图表显示会报错；
v-show图表加载dom结构存在， 可渲染

但是v-show会导致图表渲染宽度只有100px，使用延时器setTimeOut延后图表加载就可以了

mounted() {
	this.init();
}
methods: {
	init() {
		let echarts = this.$refs.echarts;
		setTimeout(() => {
			this.myChart=echarts.init(document.getElementById('mychart'));
			this.myChart.setOption(option);
		})
	}
}