vue中echarts 在element-ui的tab 切換時 width 為100px 時的解決方式

最近在項目中遇到了這種情況，需要在tab控件上渲染多個echart圖標，然后切換查看時，發現圖表的寬度不正確

原因：在頁面進行加載時，隱藏的圖表找不到對應的div大小，所以默認給了一個大小。所以要做的就是在頁面加載時，就對圖表進行初始化。
網上的解決方案大多都是監聽tab的切換事件，然后再根據切換的頁面重新渲染echart組件，比較麻煩。如下是個人的解決方法：

原理：利用v-if屬性,當切換至對應的tab時，設置其v-if的值為true即可，同時設置默認顯示的tab
舉例如下：

<el-tabs type="card" v-model="tabItem">
  <el-tab-pane name="heart">
    <span slot="label"><icon name="heart" scale="2"></icon>心率</span>
    <baseline ref="heart" :chartData="{}" v-if="'heart' === tabItem"></baseline>
  </el-tab-pane>
  <el-tab-pane name="breath">
    <span slot="label"><icon name="breath" scale="2"></icon>呼吸</span>
    <baseline ref="breath" :chartData="{}" v-if="'breath' === tabItem"></baseline>
  </el-tab-pane>
  <el-tab-pane label="體動" name="move">
    <span slot="label"><icon name="move" scale="2"></icon>體動</span>
    <baseline ref="move" :chartData="{}" v-if="'move' === tabItem"></baseline>
  </el-tab-pane>
</el-tabs>

這里默認tab為心率tab，當切換時，同一時刻只有一個v-if為true，當將其設置為true時，Vue會重新在頁面渲染組件，即完成了組件渲染的步驟。

更新: 知乎某不知名大佬給了一個更加的簡單的方法:
el-tab-pane添加上lazy='true’屬性即可
補充說明，親自驗證之后，發現上述添加lazy屬性的方法會莫名導致echarts組件尺寸不正常。
我已經寫好了示例代碼，包含設置v-if和lazy-true兩種方式的實現形式，lazy-true這種方法會莫名其妙導致echarts尺寸不正確，建議使用設置v-if的形式， 這是github代碼地址： https://github.com/lizheng3401/echarts-in-element-doesn-t-work

原文：https://blog.csdn.net/SanJiK/article/details/79764429

 

 

element-ui tab切換加載echarts無法正常顯示問題

element-ui tab切換時候，第一個圖正常顯示，第二個及之后的圖無法正常顯示問題：

 

解決方法：

 設置當前key值與v-model綁定的值一致時才加載圖表。

<el-tabs v-model="activeName" type="border-card">
<el-tab-pane v-for="item in tabMapOptions" :label="item.label" :key='item.key' 
:name="item.key">
<line-chart v-if="item.key === activeName" :chart-data="InOutChartData" >
</line-chart>
</el-tab-pane>
</el-tabs>

原文參考：https://blog.csdn.net/carmen_shao/article/details/82179620

 

　

 其他參考：https://www.jianshu.com/p/2403838b184f