记录项目中遇到的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);
})
}
}