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>