每日一嘮叨：
實(shí)現(xiàn)柱狀圖使用了v-if或v-show做判斷時(shí)，柱圖要么顯示一半要么不顯示，使用v-if的時(shí)候，當(dāng)條件為false時(shí)，會出錯(cuò)，因?yàn)榇藭r(shí)div是不存在的，所以無法對圖表進(jìn)行初始化。v-show結(jié)構(gòu)已經(jīng)存在，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，結(jié)構(gòu)并未重新渲染，會出現(xiàn) echarts 圖表未獲取到最外層大盒子的寬度而顯示一半的情況。原本想著用Vue.nextTick強(qiáng)制初始化，但也沒有效果。

正文開始??

需求：實(shí)現(xiàn)點(diǎn)擊圖片放大功能。

效果圖：

image.png

image.png

代碼：

實(shí)現(xiàn)方法是在updated()鉤子函數(shù)中重新resize()就能顯示全部的echarts了。

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

/*項(xiàng)目echarts小部分代碼*/
    this.myChart=echarts.init(document.getElementById('mychart'));
    this.myChart.setOption(option);
    // 隨著屏幕大小調(diào)節(jié)圖表
    window.addEventListener("resize",()=>{
          this.myChart.resize();
    })