Echarts多图表后面图表走形问题
程序员文章站
2022-04-19 22:34:54
...
后面的图表借用chart-A的宽高
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<!--width:50%;height: 50px;line-height: 50px;font-size: 18px;-->
<li class="layui-this" id="dept" lay-filter="dept1" style="margin-bottom:20px;padding-left: 30px;border-bottom: 1px solid rgba(77,82,89,0.1);">
部门统计
</li>
<li id="danger" lay-filter="danger1" style="margin-bottom:20px;padding-left: 30px;border-bottom: 1px solid rgba(77,82,89,0.1);">
评价单元统计
</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" style="width: 100%;height:250px;" id="chart-A">1</div>
<div class="layui-tab-item" style="width: 100%;height:250px;" id="chart-E">2</div>
</div>
</div>
let chartA = echarts.init(document.getElementById("chart-A"), 'light');
let optionA = {
legend: {
},
};
chartA.setOption(optionA);
$('#chart-E').width($('#chart-A').width());
$('#chart-E').height($('#chart-A').height());
let chartE = echarts.init(document.getElementById("chart-E"), 'light');
let optionE = {
legend: {
},
};
chartE.setOption(optionE);
layui.use('element', function(){
var element = layui.element;
//一些事件监听
element.on('tab(dept1)', function(data){
$("#dept").attr("class","layui-this");
$("#danger").removeClass("layui-this");
$("#chart-A").attr("class","layui-tab-item layui-show");
$("#chart-E").removeClass("layui-show");
});
//一些事件监听
element.on('tab(danger1)', function(data){
$("#danger").attr("class","layui-this");
$("#dept").removeClass("layui-this");
$("#chart-A").attr("class","layui-tab-item layui-show");
$("#chart-E").removeClass("layui-show");
});
});
上一篇: Spring2.5 IOC的简单实现
下一篇: JRobin显示中文