最近在專案中遇到了這種情況，需要在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中echarts圖遇到的問題(element中的Tabs 標籤頁)

在專案中,遇到了一個奇怪問題:

element中的el-tabs元件,在el-tab-pane引入echarts圖示時,重新整理時沒有圖標出現,如果將瀏覽器視窗縮小一點,就可以展示.

解決方案：

在echarts中加入v-if來解決 (另外,有時我們在專案中用v-show也會出現上述類似情況,將v-show改成v-if試試就可以解決)

<template>
 <el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="使用者管理" name="first">使用者管理</el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  <el-tab-pane label="定時任務補償" name="fourth">
    <div class="echartsBox" 
      v-loading="loadingDetail"
      element-loading-spinner="el-icon-loading"
      >
      <echart-line 
      v-if="'fourth' === activeName"  //在這裡加上這句話就可以解決上面的問題
      class="CurePicture"
      :category="chartData.category"
      :data="chartData.data"
      :unit="chartData.unit"
      ></echart-line>
     </div>
  </el-tab-pane>
 </el-tabs>
</template>
<script>
import echartLine from "@/components/echarts/line"
 export default {
  components: {
  echartLine
  },data() {
   return {
    activeName: 'second'
   };
  },methods: {
   handleClick(tab,event) {
    console.log(tab,event);
   }
  }
 };
</script>

拿走，不用謝!!!

以上這篇Vue解決echart在element的tab切換時顯示不正確問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。