v-if和updated鉤子結合使用 渲染echart圖表

項目需求是這樣的，用戶能夠自定選擇echart 曲線圖 是橫向仍是豎向顯示。個人作法是 寫了一個橫向的echart圖表，也寫了一個豎向的echart圖表，而後二者共用存在store裏的圖表數據，就能實現切換顯示了。

實際項目中發現的問題是若是用v-show 切換兩個圖表，後來顯示的會由於沒有高度 而沒有辦法撐開。

解決辦法 換成v-if，由於v-if從新改了dom，因此圖表能夠從新獲取高度從而從新渲染圖表，實現圖表的切換,  可是切換後的圖表 沒有數據了。

解決辦法  用v-if切換圖表，而且在updated 鉤子函數中再給store的裏面的來從新賦予數值。

代碼以下：template中

    <div>
      <el-button type='primary' @click="testIf=!testIf">test</el-button>
    </div>
    <div class="testLeft" v-if="testIf">
      <vertical-chart :style="{width:'300px',height:'400px'}"></vertical-chart>
    </div>
    <div class="testLeft" v-else>
      <line-chart :style="{width:'400px',height:'300px'}"></line-chart>
    </div>

在 script中

  updated(){
     //更改store裏的數值
  }