解决Echarts使用tab切换时只显示第一个tab中图表，其他tab中图表不显示或显示不全问题
近期项目中使用到了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}
{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}
{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);
}
}效果如下：
