echarts切换，设置的默认显示第一个，但是第一个是空白，第二三个正常显示（layui）

Question

问题遇到的现象和发生背景

第二个第三个正常显示，第一个显示空白

问题相关代码，请勿粘贴截图

<div class="layui-tab layui-tab-gangwei layui-tab-zhuanyexian">
                    <ul class="layui-tab-title">
                        <li class="layui-this"><i class="iconfont icon-hetongzhi" style="font-size: 14px;"></i> A
                        </li>
                        <li class="layui-this"><i class="iconfont icon-waibaohetong"></i>B</li>
                        <li><i class="iconfont icon-waibaoxuqiuguanli_biangengguanli"></i>C</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="echarsThree eHeight"></div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="echars eHeight"></div>
                        </div>
                        <div class="layui-tab-item " >
                            <div class="echarsTwo eHeight"></div>
                        </div>
                    </div>
</div>

Js:
   document.querySelector('.echarsThree').setAttribute('_echarts_instance_', '');
    var myChart = echarts.init(document.querySelector('.echarsThree'));
......
 myChart.setOption(option, true);

我的解答思路和尝试过的方法

我单独设置背景宽度就显示，但是很奇怪

 <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show" >
                            <div class="echarsThree eHeight" style="height: 100%;width: 100%;background-color: #0bf49f"></div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="echars eHeight"></div>
                        </div>
                        <div class="layui-tab-item " >
                            <div class="echarsZhuanTwo eHeight"></div>
                        </div>
</div>

Answer 1

没给宽高，切换最容易出问题了。
给你两种解决方案，
1.定死图表宽高
2.不定死，用绝对定位弄，比较复杂