Echarts:宽度100%变为100px问题

我写的代码：

<el-col :span="12" class="widthCharts">
       <div id="congyediv1" style="width: 100%;height: 300px;"></div>
</el-col>

问题：渲染后宽度变为100px

问题原因：

图表的父容器是隐藏的，设置 display：none，图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px

解决方式：在父容器设置显示后再生成echarts，有的tab切换中的display：none也会导致这个问题

解决：

var chartDom = document.getElementById('congyediv4');
// 获取图表容器
var myChart = echarts.init(chartDom);  //初始化图标
// 设置宽度自适应
window.addEventListener('resize', () => {
        statInfo.style.width = window.innerWidth - 200 + "px";
        myChart.resize();
});
//终极解决方案：每一秒更新一次图表，这样就可以实现自适应的同时，解决这个bug
setInterval(()=>{
     chartDom.style.width = document.getElementsByClassName('widthCharts')[5].offsetWidth + 'px';
     myChart.resize();
},1000)

//还有一个方案，延迟执行一次resize也可以解决首次加载问题100px的问题
setTimeOut(()=>{
     chartDom.style.width = document.getElementsByClassName('widthCharts')[5].offsetWidth + 'px';
     myChart.resize();
},1000)