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

bug场景

两种情况

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

---

问题解决方案

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

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

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

  
    

  
  



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

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

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

三、强制覆盖样式

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

总结

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

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

如下：

over