在el-tabs中echarts图表宽高设置style=“width: 100%； height: 100%“不起效变成100px的问题

出现的问题

在开发过程中发现el-tabs在默认页echarts正常显示，其他页中echarts设置的宽高为100%不起效，最后都是100px

问题原因

echarts绘制图表计算宽度的时候，由于第二个及后面的tab的属性display: none; 所以无法获取到clientWidth，而 parseInt(stl.width, 10)) 将width: 100%;转为100，所以计算出的图表宽度高度为100px。

解决方案

结合v-if，将echarts绘图封装成一个组件，然后在el-tab中调用这个组件，显示问题解决，但是在tab页切换的时候，因为使用v-if说以每次切换都会重新绘制echarts，造成性能上一定的浪费，不过每次切换都会加载图例动画很炫酷有木有。

上案例

页面结构部分

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="访问明细" name="first">
        <div v-if="!isshow" style="width: 100%; height: 100%">
          <lineCharts width="100%" height="100%"></lineCharts>
        </div>
      </el-tab-pane>
      <el-tab-pane label="访问明细" name="first">
        <div v-if="isshow" style="width: 100%; height: 100%">
          <!-- 柱状统计图 -->
          <histogramCharts width="100%" height="100%"></histogramCharts>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// 引入组件
import histogramCharts from "./histogramCharts";
import lineCharts from "./lineCharts";
export default {
     
  components: {
      histogramCharts, lineCharts },
  data() {
     
    return {
     
      isshow: false,
    };
  },
  methods: {
     
    // 切换tab页点击事件
    handleClick(tab) {
     
      this.isshow = tab.name == "second" ? true : false;
    },
  },
};
</script>

组件部分

<template>
  <div style="width: 100%; height: 100%">
    <!-- 折线图组件 -->
    <div id="lineChart" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
export default {
     
  name: "lineCharts",
  data() {
     
    return {
     };
  },
  mounted() {
     
    this.drawLineChart();
  },
  methods: {
     
    drawLineChart() {
     
      let echarts = this.$echarts;
      let lineChart = echarts.init(document.getElementById("lineChart"));
      let option = {
     
        xAxis: {
     
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
     
          type: "value",
        },
        series: [
          {
     
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
          },
        ],
      };
      // 绘制图表
      lineChart.setOption(option);
      window.onresize = function () {
     
        lineChart.resize();
      };
    },
  },
};
</script>