tab页切换时，折线图会被挤压的解决办法

遇到两次了，记录一下

如果默认展示的是折线图页面，就没有问题

如果需要切换才到折线图，就会出现折线图被挤压变形的问题

原因：折线图在初始加载时没有正确获取到父容器的尺寸或者隐藏状态导致的。

解决办法：延迟加载折线图

                  这意味着在用户切换到展示折线图的标签页后再进行折线图的初始化和绘制。这样可   以确保折线图在加载时能够正确获取到父容器的尺寸，并避免初始化时的变形问题。

代码如下：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="折线图" name="lineChartTab">
      <div v-if="activeTab === 'lineChartTab'">
        <LineChart v-if="lineChartInitialized" />
      </div>
    </el-tab-pane>
    <el-tab-pane label="其他标签页" name="otherTab">
      <!-- 其他标签页的内容 -->
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import LineChart from './LineChart.vue'; // 假设你有一个单独的组件来显示折线图

export default {
  components: {
    LineChart
  },
  data() {
    return {
      activeTab: 'lineChartTab', // 当前活动的标签页
      lineChartInitialized: false // 标记折线图是否已初始化
    };
  },
  watch: {
    activeTab(newTab) {
      if (newTab === 'lineChartTab' && !this.lineChartInitialized) {
        // 切换到展示折线图的标签页，且折线图尚未初始化
        this.initializeLineChart();
      }
    }
  },
  methods: {
    initializeLineChart() {
      // 在这里进行折线图的初始化和绘制操作，可以调用组件方法或者直接设置数据
      // 示例中假设在LineChart组件中有一个方法或者数据初始化来绘制折线图
      // 例如：this.$refs.lineChart.initialize(); 或者设置数据
      this.lineChartInitialized = true;
    }
  },
  mounted() {
    // 页面加载时也可以初始化折线图，如果需要的话
    // this.initializeLineChart();
  }
};
</script>

好🦌