elementUI tabs切换 echarts宽度挤压到一起 由100%变成100px

这个问题通常是因为在Element UI的<el-tabs>组件中，切换时子组件的尺寸没有正确更新导致的。为了解决这个问题，你可以使用Element UI提供的lazy属性或者手动控制<el-tab-pane>的lazy属性，并在切换时手动刷新ECharts图表的尺寸。

以下是一个简单的例子，展示如何在Element UI的<el-tabs>组件中使用ECharts，并在切换时更新图表的尺寸：

<template>
  <el-tabs v-model="activeName" @tab-click="handleTabClick">
    <el-tab-pane label="图表A" name="first">
      <div ref="chartContainer" style="width: 100%; height: 300px;"></div>
    </el-tab-pane>
    <el-tab-pane label="图表B" name="second">
      <!-- 其他内容 -->
    </el-tab-pane>
  </el-tabs>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  data() {
    return {
      activeName: 'first',
      myChart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.chartContainer);
      const option = {
        // ECharts 配置项
      };
      this.myChart.setOption(option);
    },
    handleTabClick() {
      // 在切换之前，先resize图表
      if (this.myChart) {
        this.myChart.resize();
      }
    }
  }
};
</script>

在这个例子中，当你点击标签页时，handleTabClick方法会被触发，然后调用ECharts实例的resize方法来更新图表的尺寸，以适应新的容器尺寸。这样做可以确保每次切换时，ECharts图表都能正确显示。