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