在做項目的時候遇到這樣一個問題：在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);
}
})