<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>
没给宽高,切换最容易出问题了。
给你两种解决方案,
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 ...