echarts使用v-if或v-show不显示、加载一半的问题

每日一唠叨：
实现柱状图使用了v-if或v-show做判断时，柱图要么显示一半要么不显示，使用v-if的时候，当条件为false时，会出错，因为此时div是不存在的，所以无法对图表进行初始化。v-show结构已经存在，当数据发生变化时，结构并未重新渲染，会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况。原本想着用Vue.nextTick强制初始化，但也没有效果。

正文开始

需求：实现点击图片放大功能。

效果图：

image.png

image.png

代码：

实现方法是在updated()钩子函数中重新resize()就能显示全部的echarts了。

updated() {
            this.myChart.resize();
        },

/*项目echarts小部分代码*/
    this.myChart=echarts.init(document.getElementById('mychart'));
    this.myChart.setOption(option);
    // 隨著屏幕大小調節圖表
    window.addEventListener("resize",()=>{
          this.myChart.resize();
    })