echarts切换,设置的默认显示第一个,但是第一个是空白,第二三个正常显示(layui)

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

img


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

img

问题相关代码,请勿粘贴截图
<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>

img

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

没看你描述的啥意思

echarts在渲染图表时,会自动根据容器的尺寸撑满图表的
或许是你切换选项卡的时候还未获取到容器,你试一下延迟渲染

lay-tab切换是改变display,需要监听tab切换,设置echarts实例宽高

<!-- 绑定lay-filter -->
<div class="layui-tab" lay-filter="demo">
...
</div>

element.on('tab(demo)', function(data) {
  var tabIndex = data.index // 当前tab索引
  var size = {width: 200, height: 200}
  if (tabIndex === 0) {
    chart.resize(size)
  } else if (tabIndex === 1) {
    chart1.resize(size}
 }) else ...