ElementUi tab组件切换时echarts图标大小异常

ElementUI的Tab组件在切换时可能会导致内部内容（包括ECharts图表）大小异常。这通常是因为ECharts图表没有正确适应其容器大小。为了解决这个问题，你可以在Tab组件的切换事件中使用ECharts实例的resize方法来让图表重新适应新的尺寸。

以下是一个简单的示例代码：

<template>
  <el-tabs v-model="activeName" @tab-click="handleTabClick">
    <el-tab-pane label="图表A" name="first">
      <div ref="chartA" style="width: 100%; height: 300px;"></div>
    </el-tab-pane>
    <el-tab-pane label="图表B" name="second">
      <div ref="chartB" style="width: 100%; height: 300px;"></div>
    </el-tab-pane>
  </el-tabs>
</template>
 
<script>
  export default {
    data() {
      return {
        activeName: 'first',
        chartA: null,
        chartB: null,
      };
    },
    methods: {
      handleTabClick() {
        this.$nextTick(() => {
          this.chartA && this.chartA.resize();
          this.chartB && this.chartB.resize();
        });
      },
      initCharts() {
        this.chartA = this.$echarts.init(this.$refs.chartA);
        this.chartB = this.$echarts.init(this.$refs.chartB);
        
        // 初始化图表的配置和数据
        // ...
      }
    },
    mounted() {
      this.initCharts();
    }
  };
</script>

在上述代码中，handleTabClick 方法会在Tab切换时被触发，我们通过this.$nextTick确保DOM更新完成后执行图表的resize方法。这样可以确保图表在新的容器尺寸下正确渲染。