近期項目中使用到了Echarts來在展示圖表，兩個tab切換頁面中都存在圖表，頁面加載完成後都對所有圖表進行了初始化和繪製，然而在tab切換中出現瞭如下動圖中的問題：
說明：圖中可以看到，第一個tab顯示是很正常的，但是第二個tab中內容顯示不完整。
我的解決方法是：設置被選中監聽函數，在第二個tab被選中時初始化圖表：
$(".js-flow-unit").on("click", "span", function () {
var $index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".targetFlow-list").addClass("hide");
$(".targetFlow-list").eq($index).removeClass("hide");
if($index == 0){
//初始化 第二個圖表
targetFlowPpsFn();
}else {
targetFlowBpsFn();
}
});
//第一個圖表初始化
targetFlowBpsFn();
//目標地址流量分佈圖 - bps
function targetFlowBpsFn() {
var targetFlowBps = echarts.init(document.getElementById("targetFlow-bps"));
var app4 = {};
bpsOption = null;
bpsOption = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
backgroundColor:"#fff",
color: ["#7089ce","#fb7a53","#3abdaf","#78e7e6","#f6b61c"],
legend: {
type: 'scroll',
orient: 'vertical',
right: 50,
top: 100,
bottom: 20,
//data:['其他','110.147.103.10','118.24.189.23','118.110.2.102','118.10.102.80']
data:[
{
name:'118.10.102.80',
icon:'circle'
}, {
name:'110.147.103.10',
icon:'circle'
}, {
name:'118.24.189.23',
icon:'circle'
}, {
name:'118.110.2.102',
icon:'circle'
}, {
name:'其他',
icon:'circle'
}
],//分別修改legend格式
},
series: [
{
type:'pie',
radius: ['50%', '30%'],
center: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'left'
},
emphasis: {
show: true,
textStyle: {
fontSize: '16',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:500, name:'其他'},
{value:100, name:'118.110.2.102'},
{value:220, name:'118.24.189.23'},
{value:80, name:'110.147.103.10'},
{value:10, name:'118.10.102.80'},
]
}
]
};
if (bpsOption && typeof bpsOption === "object") {
targetFlowBps.setOption(bpsOption, true);
}
}
//目標地址流量分佈圖 - pps
function targetFlowPpsFn() {
var targetFlowPps = echarts.init(document.getElementById("targetFlow-pps"));
var apppps = {};
ppsOption = null;
ppsOption = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
backgroundColor:"#fff",
color: ["#7089ce","#fb7a53","#3abdaf","#78e7e6","#f6b61c"],
legend: {
type: 'scroll',
orient: 'vertical',
right: 50,
top: 100,
bottom: 20,
data:[
{
name:'118.10.102.80',
icon:'circle'
}, {
name:'110.147.103.10',
icon:'circle'
}, {
name:'118.24.189.23',
icon:'circle'
}, {
name:'118.110.2.102',
icon:'circle'
}, {
name:'緊用IP',
icon:'circle'
}
],//分別修改legend格式
},
series: [
{
type:'pie',
radius: ['50%', '30%'],
center: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'left'
},
emphasis: {
show: true,
textStyle: {
fontSize: '16',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:500, name:'緊用IP'},
{value:100, name:'118.110.2.102'},
{value:220, name:'118.24.189.23'},
{value:80, name:'110.147.103.10'},
{value:10, name:'118.10.102.80'},
]
}
]
};
if (ppsOption && typeof ppsOption === "object") {
targetFlowPps.setOption(ppsOption, true);
}
}效果如下：
