vue使用element-ui tabs切換echarts 解決寬度100% 問題

vue使用element-ui tabs切換echarts 解決寬度100% 問題

問題

echarts渲染時tab選項卡display為none，所以width：100%沒有可繼承項，被echarts自帶方法切割成100px。

解決思路：

銷毀組件，在tab選項卡被選中時重新渲染組件，這個時候就會有寬度繼承。

建議使用第二種

第一種 解決：通過 v-if 重新渲染組件即可。

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="歷史" name="first">
            <ToexamineLine ref="child" v-if="activeName==='first'"/>
        </el-tab-pane>
        <el-tab-pane label="間隔" name="second">
            <IntervalLine ref="second" v-if="activeName==='second'"/>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "IncomeStatistics",
    data() {
      return {
        activeName: 'first', //當前激活的標簽頁
      };
    },
    methods: {
      //切換標簽頁時觸發
      handleClick(tab, event) {
        this.activeName = tab.name;
      },
    }
  }
</script>

第二種 延時調用echart的resize()方法即可

methods:{
    handleClick(tab, event) {
      if (tab.name === 'second') {
        this.$nextTick(() => {
          this.$refs.second.chart.resize()
        })
      }
    },
}

第三種 給 標簽添加lazy屬性

<el-tab-pane :laze="true">
    <ToexamineLine ref="child"/>
</el-tab-pane>