項目裏圖表高度設置了固定的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>