在做项目的时候遇到这样一个问题：在tabs多标签切换的情况下显示echart绘制的图形时，只有第一个页签下的图形显示出来，其余页签下的都是空白。
总结了一下，主要是这个原因：除了第一个的其他tab页未加载，所以宽高就发生了问题；
先来理解这样一段话：多标签页中，那些初始隐藏的标签在初始化图标的时候获取不到容器的实际高度，可能会绘制失败，因此在切换标签页时需要手动调用resize()方法获取正确的高度并且刷新画布或者在option中显示指定图表高度。
解决办法：1、在刚入页面的时候全部绘制所有标签页下的echarts图形，然后在切换tab页签的时候调用chartObj(echarts 实例)的resize()刷新画布。（注意：有几个echarts图形，就要创建几个chartObj对象）；
我自己在其中遇到的坑：
1、五个标签页下全部显示echarts绘制的折线图，偷懒五个图形调用同一个方法，使用同一个chartObj（echarts 实例）。结果只有第一个页签和最后一个页签下的图形显示出来。原因应该是中间三个的图形被最后一个给覆盖了；
2、就牵扯到$(function(){})作用域的问题了，普通函数跟普通函数中使用的全局变量需要全部放在$(function(){})中，要不然会报错chartObj(echarts 实例)找不到的错误；
代码如下：
html部分：
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<div class="layui-tab layui-tab-card" lay-filter=\'test\'>
<ul class="layui-tab-title">
<li class="layui-this" data-index=\'0\'>网站设置</li>
<li data-index=\'1\'>用户管理</li>
<li data-index=\'2\'>权限分配</li>
<li data-index=\'3\'>商品管理</li>
<li data-index=\'4\'>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div id="chart1" style="height: 300px;"></div>
</div>
<div class="layui-tab-item">
<div id="chart2" style="height: 300px;"></div>
</div>
<div class="layui-tab-item">
<div id="chart3" style="height: 300px;"></div>
</div>
<div class="layui-tab-item">
<div id="chart4" style="height: 300px;"></div>
</div>
<div class="layui-tab-item">
<div id="chart5" style="height: 300px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
js部分：
$(function(){
layui.use(\'element\',function(){
var element=layui.element;
var $=layui.jquery;
$(".layui-tab-title li").hover(function(){
var $i=$(this).attr("data-index");
$(this).addClass("layui-this").siblings().removeClass("layui-this");
$(".layui-tab-content .layui-tab-item").eq($i).addClass("layui-show").siblings().removeClass("layui-show");
var id = $(".layui-tab-content .layui-tab-item").eq($i).children(\'div\').attr(\'id\');
myChartObj[id].resize();
});
});
var myChartObj = {\'chart1\':null,\'chart2\':null,\'chart3\':null,\'chart4\':null,\'chart5\':null};
getChart(\'chart1\');
getChart(\'chart2\');
getChart(\'chart3\');
getChart(\'chart4\');
getChart(\'chart5\');
function getChart(chartId){
myChartObj[chartId] = echarts.init(document.getElementById(chartId));
var option = {
title: {
text: \'\'
},
tooltip: {
trigger: \'axis\'
},
legend: {
data:[\'邮件营销\',\'联盟广告\',\'视频广告\',\'直接访问\',\'搜索引擎\']
},
grid: {
left: \'3%\',
right: \'4%\',
bottom: \'3%\',
containLabel: true
},
xAxis: {
type: \'category\',
boundaryGap: false,
data: [\'周一\',\'周二\',\'周三\',\'周四\',\'周五\',\'周六\',\'周日\']
},
yAxis: {
type: \'value\'
},
series: [
{
name:\'邮件营销\',
type:\'line\',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:\'联盟广告\',
type:\'line\',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:\'视频广告\',
type:\'line\',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:\'直接访问\',
type:\'line\',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:\'搜索引擎\',
type:\'line\',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
myChartObj[chartId].setOption(option);
}
})