vue使用element-ui tabs切换echarts 解决宽度100% 问题

vue使用element-ui tabs切换echarts 解决宽度100% 问题

问题描述：vue+element项目中使用到了tab切换选项卡，其中有一个tab下的内容是echarts，出现了echarts宽度缩减为100px无法继承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="1">
            <xiaobear-bar-chart ref="child" v-if="activeName==='1'"/>
        </el-tab-pane>
        <el-tab-pane label="学生周记统计" name="2">
            <xiaobear-pie-chart ref="second" v-if="activeName==='2'"/>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "IncomeStatistics",
    data() {
      return {
        activeName: '1', //当前激活的标签页
      };
    },
    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>