tabs多标签显示echarts图表
在做项目的时候遇到这样一个问题：在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);
}
})
