解决el-tab使用echarts宽度自适应问题

在使用 Element UI 的 el-tabs 组件和 ECharts 图表时，可能会遇到图表宽度自适应的问题。这通常发生在 el-tabs 切换时，因为其中的 el-tab-pane 初始化时宽度可能不正确。

为了解决这个问题，可以在 el-tab-pane 内容初始化或者大小变化时，使用 ECharts 的 resize 方法来更新图表的大小。

以下是一个简单的 Vue 组件示例，展示了如何在 el-tab-pane 变为可见时，更新 ECharts 图表的大小：

<template>
  <el-tabs v-model="activeName" @tab-click="handleTabClick">
    <el-tab-pane label="图表A" name="chartA">
      <div ref="chartA" class="chart"></div>
    </el-tab-pane>
    <el-tab-pane label="图表B" name="chartB">
      <div ref="chartB" class="chart"></div>
    </el-tab-pane>
  </el-tabs>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  data() {
    return {
      activeName: 'chartA',
      myChartA: null,
      myChartB: null,
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      this.myChartA = echarts.init(this.$refs.chartA);
      this.myChartB = echarts.init(this.$refs.chartB);
 
      // 初始化图表
      this.myChartA.setOption({ /* ... */ });
      this.myChartB.setOption({ /* ... */ });
    },
    handleTabClick(tab, event) {
      // 在切换标签时，更新图表大小
      this.myChartA.resize();
      this.myChartB.resize();
    },
  },
};
</script>
 
<style>
.chart {
  width: 100%;
  height: 400px;
}
</style>

在这个示例中，handleTabClick 方法会在标签被点击时触发，并且在其内部调用 resize 方法来更新图表的大小。这确保了每次切换标签时，ECharts 图表都会适应其容器的大小。