项目里图表高度设置了固定的360px。
从网上查的好多结果，都说是因为 第二个tab的宽度 没有设置 或者设置为0或者 设置的值很小，导致的第二个tab里的图表无法显示出来。
项目中使用到了Echarts来在展示图表，两个tab切换页面中都存在图表，页面加载完成后
对所有图表进行了初始化和绘制，然后切换查看时，发现图表的宽度不正确.，第一个tab显示是很正常的，但是第二个tab中内容显示不出来。
第一个tab ：图表1 （当前负荷）
第二个tab ：图表2 （当前电量）
原因：因为页面加载时， 第二个tab ：图表2 （当前电量）因为是隐藏图表所以没有给 设置具体的宽度，所以不能显示，而第一个tab ：图表1 （当前负荷）有具体的宽度，所以可以正常显示，，，，，，，，，，，，，，，，，，，，，，在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。而这个默认宽度很小，所以导致echarts图表显示不完全。
。
。
。
解决办法：在所有图表加载之前，重新设置 图表div的宽度和高度，就可以了，因为第一个tab里的图表1可以正常显示，那么就获取图表1的宽度，赋值给 图表2的宽度，，，，，，，我这里 图表1当前负荷 的宽度 不是固定的，是使用的bootstrap前端框架的 ，只有页面加载完，才可以知道 图表1div的具体宽度 （所有图表高度固定 360px），页面加载完得到 图表1div高度， 然后在 修改 图表2当前电量 div 宽度==图表1div宽度。
下面是主要的 html 代码，，其他用不到
<div class="tabs-container">
<ul class="nav nav-tabs">
<li><a class="nav-link active" data-toggle="tab" href="#tab-1" οnclick="tab_method('1');return false;">当前负荷</a></li>
<li><a class="nav-link" data-toggle="tab" href="#tab-2" οnclick="tab_method('2');return false;">当前电量</a></li>
<li><a class="nav-link" data-toggle="tab" href="#tab-3" οnclick="tab_method('3');return false;">实时电压</a></li>
<li><a class="nav-link" data-toggle="tab" href="#tab-4" οnclick="tab_method('4');return false;">实时电流</a></li>
<li><a class="nav-link" data-toggle="tab" href="#tab-5" οnclick="tab_method('5');return false;">功率因数</a></li>
</ul>
<div class="tab-content">
<div id="tab-1" class="tab-pane active">
<div id="ibox" class="ibox ">
<div id="myChart_CurrentFuHe" class=" ibox-content" style="width:100%;height:360px"> </div>
</div>
<div class="ibox ">
<div id="" class=" ibox-content" style="height:360px">111111111111 </div>
</div>
</div>
<div id="tab-2" class="tab-pane">
<div class="ibox ">
<div id="myChart_CurrentDianLiang" class=" ibox-content" style=" height:360px"> </div>
</div>
<div class="ibox ">
<div id="" class=" ibox-content" style="height:360px"> 121121222222</div>
</div>
</div>
</div>
</div>
下面是页面上 主要的 js 代码
这块代码设置在 初始化所有图表之前，先重新定义 所有图表的div的宽高。
<script src="../../scripts/echarts.min.js"></script>
<script type="text/javascript">
var tab1 = $('#ibox').width();
var tab2 = $('#ibox').height();
//tab-2--根据图表1 div的宽高 重新设置图表2 div宽高
$("#myChart_CurrentDianLiang").css({
"width": tab1 + 'px',
"height": tab2 + 'px'
})
//tab-3--根据图表1 div的宽高 重新设置图表3 div宽高
$("#myChart_RealtimeDianYa").css({
"width": tab1 + 'px',
"height": tab2 + 'px'
})
//tab-4--根据图表1 div的宽高 重新设置图表4 div宽高
$("#myChart_RealtimeDianLiu").css({
"width": tab1 + 'px',
"height": tab2 + 'px'
})
//tab-5--根据图表1 div的宽高 重新设置图表5 div宽高
$("#myChart_GongLvYinShu").css({
"width": tab1 + 'px',
"height": tab2 + 'px'
})
//图表1--当前负荷
var myChart_CurrentFuHe = echarts.init(document.getElementById('myChart_CurrentFuHe'));
var option_currentfuhe = {
title: {
text: '当前用电负荷（KW/Kvar）',
subtext: '单位（KW/Kvar）'
},
tooltip: {
trigger: 'axis'
},
legend: {
x: '21%',
width: '70%',
data: ['总有功功率', '总无功功率', 'A相有功功率', 'B相有功功率', 'C相有功功率', 'A相无功功率', 'B相无功功率', 'C相无功功率']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时', '24时']
},
yAxis: {
type: 'value'
},
series: [
{
name: '总有功功率',
type: 'line',
stack: '总量',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 20.7, 175.6, 182.2, 48.7, 88.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
},
{
name: '总无功功率',
type: 'line',
stack: '总量',
data: [4.6, 5.9, 9.0, 26.4, 28.7, 30.7, 175.6, 182.2, 48.7, 78.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
},
{
name: 'A相有功功率',
type: 'line',
stack: '总量',
data: [6.6, 5.9, 9.0, 26.4, 28.7, 40.7, 175.6, 182.2, 48.7, 68.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
},
{
name: 'B相有功功率',
type: 'line',
stack: '总量',
data: [8.6, 5.9, 9.0, 26.4, 28.7, 50.7, 175.6, 182.2, 48.7, 58.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
},
{
name: 'C相有功功率',
type: 'line',
stack: '总量',
data: [10.6, 5.9, 9.0, 26.4, 28.7, 60.7, 175.6, 182.2, 48.7, 48.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
},
{
name: 'A相无功功率',
type: 'line',
stack: '总量',
data: [14.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 38.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
},
{
name: 'B相无功功率',
type: 'line',
stack: '总量',
data: [16.6, 5.9, 9.0, 26.4, 28.7, 80.7, 175.6, 182.2, 48.7, 28.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
},
{
name: 'C相无功功率',
type: 'line',
stack: '总量',
data: [22.6, 5.9, 9.0, 26.4, 28.7, 90.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
}
]
};
myChart_CurrentFuHe.setOption(option_currentfuhe);
//图表2--当前电量
var myChart_CurrentDianLiang = echarts.init(document.getElementById('myChart_CurrentDianLiang'));
var option_CurrentDianLiang = {
title: {
text: '当前用电量（KWh/Kvarh）',
subtext: '单位（KWh/Kvarh）'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['正向总有功电量', '反向总有功电量', '正向总无功电量', '反向总无功电量']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时', '24时']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '正向总有功电量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 18.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 58.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
},
{
name: '反向总有功电量',
type: 'bar',
data: [22.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 28.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 48.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint: {
data: [
{ name: '年最高', value: 182.2, xAxis: 7, yAxis: 183 },
{ name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
},
{
name: '正向总无功电量',
type: 'bar',
data: [32.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 38.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 38.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
},
{
name: '反向总无功电量',
type: 'bar',
data: [42.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint: {
data: [
{ name: '年最高', value: 182.2, xAxis: 7, yAxis: 183 },
{ name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
}
]
};
myChart_CurrentDianLiang.setOption(option_CurrentDianLiang);
</script>
