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

bug场景

两种情况

一就是如标题一样，给div设置的100%高度，但是最后在elements里检查元素发现高度只有100px。二是，设置了高度为100%，但是检查元素里发现元素高宽为0。

---

问题解决方案

在使用 ECharts时，将图表嵌套在 el-tabs 中，遇到宽高设置不起效的问题，有可能是下面三个原因导致的。

一、确保在图表初始化前容器已渲染

确保在图表初始化之前，图表容器的大小已经确定。可以在 Vue 的 mounted 钩子函数中初始化图表。如果是嵌套多层组件，会比较麻烦，需要考虑生命周期，但是大部分情况下，这种方式更能实现画出的图自适应地填充页面的大部分空白的效果。

<el-tabs>
  <el-tab-pane label="Tab 1">
    <div ref="echartsContainer" style="width: 100%; height: 100%;"></div>
  </el-tab-pane>
  <!-- 其他 tab 页 -->
</el-tabs>


mounted() {
  this.initEcharts();
},
methods: {
  initEcharts() {
    const container = this.$refs.echartsContainer;
    const chart = echarts.init(container);
    // 初始化图表配置等
  }
}

二、确保父容器也充满高度

确保 el-tabs 及其父容器都具有充满高度的样式，如果这个一个子组件，确保父组件都已经渲染完，然后存图的div高度能确定下来，比如这种直接把外层设置为100vh，那么外层就高度确定了，里层的div也就能确定高度，图也就画出来了。

<div style="height: 100vh;">
  <el-tabs>
    <el-tab-pane label="Tab 1">
      <div style="width: 100%; height: 100%;">
        <div id="echarts-container" style="width: 100%; height: 100%;"></div>
      </div>
    </el-tab-pane>
    <!-- 其他 tab 页 -->
  </el-tabs>
</div>

三、强制覆盖样式

可能因为父容器的布局或其他样式规则导致的，在图表的样式中使用 !important 强制覆盖可能被其他样式覆盖的情况。

<el-tabs>
  <el-tab-pane label="Tab 1">
    <div style="width: 100% ; height: 100%;">
      <div id="echarts-container" style="width: 100% !important; height: 100% !important;"></div>
    </div>
  </el-tab-pane>
  <!-- 其他 tab 页 -->
</el-tabs>

总结

最粗暴的解决办法是给div一个固定的高度，也就是上面三种解决方案的核心，比如你遇到问题时候实时给div一个高宽恒定值，然后看看画出的图尺寸变没有，大概这样。

不过画图，经常想要在更改网页尺寸时重新绘制 ECharts 图表，可以使用 resize 事件来捕获窗口大小的变化，并在事件触发时重新渲染图表。

如下：

<template>
  <div>
    <el-tabs @tab-click="handleTabClick">
      <el-tab-pane label="Tab 1">
        <div ref="echartsContainer" style="width: 100%; height: 100%;"></div>
      </el-tab-pane>
      <!-- 其他 tab 页 -->
    </el-tabs>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.initEcharts();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initEcharts() {
      const container = this.$refs.echartsContainer;
      this.chartInstance = echarts.init(container);
      // 初始化图表配置等
      this.renderChart(); // 第一次渲染图表
    },
    renderChart() {
      // 在这里编写图表的数据和配置
      const option = {
        // ...
      };
      this.chartInstance.setOption(option);
    },
    handleTabClick() {
      // 切换 Tab 时重新绘制图表
      this.renderChart();
    },
    handleResize() {
      // 窗口大小变化时重新绘制图表
      this.chartInstance.resize();
    },
  },
};
</script>

over