问题遇到的现象和发生背景
PHP语言：bootstrap框架 多Tabs中 每个tab中都有echarts; 当浏览器窗口发生变化后，切换Tab，切换到的tab下的图表不能正常显示，canvas中的width一直是0（拖拽改变浏览器大小后，才能恢复）
问题相关代码，请勿粘贴截图
<div>
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item active">
<a href="#Cat1" class="nav-link active" data-toggle="tab">Cat1</a>
</li>
<li><a href="#RF" class="nav-link" data-toggle="tab">RF</a></li>
<li><a href="#APP" class="nav-link" data-toggle="tab">APP</a></li>
<li><a href="#WCN" class="nav-link" data-toggle="tab">WCN</a></li>
<li><a href="#GU" class="nav-link" data-toggle="tab">顾总</a></li>
</ul>
</div>
<!-- 选项卡内容区域-tab内容栏 -->
<div class="tab-content container-fluid">
<div class="tab-pane fade in active show" id="Cat1">
<div class="container ">
<!-- echarts 图表区域 -->
<div class="myTable-container" id="Cat1-container"></div>
</div>
</div>
<div class="tab-pane fade in active" id="RF">
<div class="container">
<!-- echarts 图表区域 -->
<div class="myTable-container" id="RF-container"></div>
</div>
</div>
</div>
let mEcharts = [];
//图表容器初始化
let cat1 = echarts.init(document.getElementById("Cat1_container"));
let rf = echarts.init(document.getElementById('RF_container'));
//图表数据
let option1 = {
title: {
text: 'CAT1 SDK PASSRATE'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['FunctionTest', 'FTTest', 'AutomationTest']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true //left、right、bottom都设置为0的时候，纵坐标标线是否显示
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false,
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data; //x轴作为条件，y轴需改成yAxis[0].data;
var series = opt.series;
var tdHeads = '<td style="padding:0 10px">名称</td>';
series.forEach(function (item) {
tdHeads += '<td style="padding: 0 10px">' + item.name + '</td>';
});
var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;background-color:#F8F8FF"><tbody><tr>' + tdHeads + '</tr>';
var tdBodys = '';
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
if (typeof (series[j].data[i]) == 'object') {
tdBodys += '<td>' + series[j].data[i].value + '</td>';
} else {
tdBodys += '<td>' + series[j].data[i] + '</td>';
}
}
table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
}, //展示原始数据
magicType: {
show: true,
type: ['line', 'bar']
}, //bar和线之间切换
saveAsImage: {}, //图表保存成图片功能
},
},
xAxis: {
type: 'category',
boundaryGap: false, //横坐标标线 与名称是否留白，不留白则对齐
data: data_x,
// x轴坐标文字倾斜率
// axisLabel: {
// interval: 0,
// rotate: 60
// }
},
yAxis: {
type: 'value',
name: 'PassRate%',
nameLocation: 'center',
nameGap: 40,
// axisLabel: {
// formatter: '{value} %'
// },
min: 50,
max: 100,
},
series: [{
name: 'FunctionTest',
type: 'line',
// stack: 'Total', //第二条线在第一条线的基础上，数据叠加，所有不设置或者设置不同的名字
data: data_y
}, {
name: 'FTTest',
type: 'line',
// stack: 'Total',
data: [79, 96, 82.5, 94.6, 80.1]
}, {
name: 'AutomationTest',
type: 'line',
// stack: 'Total',
data: [79.5, 89.3, 94.6, 87.3, 97.2]
}]
};
let optionRF = {
title: {
text: 'RF PASSRATE'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['FunctionTest', 'FTTest', 'AutomationTest']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true //left、right、bottom都设置为0的时候，纵坐标标线是否显示
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false,
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data; //x轴作为条件，y轴需改成yAxis[0].data;
var series = opt.series;
var tdHeads = '<td style="padding:0 10px">名称</td>';
series.forEach(function (item) {
tdHeads += '<td style="padding: 0 10px">' + item.name + '</td>';
});
var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;background-color:#F8F8FF"><tbody><tr>' + tdHeads + '</tr>';
var tdBodys = '';
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
if (typeof (series[j].data[i]) == 'object') {
tdBodys += '<td>' + series[j].data[i].value + '</td>';
} else {
tdBodys += '<td>' + series[j].data[i] + '</td>';
}
}
table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
}, //展示原始数据
magicType: {
show: true,
type: ['line', 'bar']
}, //图表显示切换
saveAsImage: {} //图表保存成图片功能
},
dataView: {
// show: true,
// readOnly: false
},
},
xAxis: {
type: 'category',
// boundaryGap: false, //横坐标标线 与名称是否留白，不留白则对齐
data: ['RFxxx01', 'RFxxx02', 'RFxxx03', 'RFxxx04'],
},
yAxis: {
type: 'value',
name: 'PassRate%',
nameLocation: 'center',
nameGap: 40,
min: 50,
max: 100,
},
series: [{
name: 'FunctionTest',
type: 'bar',
barMaxWidth: 30,
emphasis: {
focus: 'series'
},
data: [55, 98.7, 88, 89.5]
}, {
name: 'FTTest',
type: 'bar',
barMaxWidth: 30,
emphasis: {
focus: 'series'
},
data: [79, 96, 82.5, 94.6]
}, {
name: 'AutomationTest',
type: 'bar',
barMaxWidth: 30,
emphasis: {
focus: 'series'
},
data: [79.5, 89.3, 94.6, 87.3]
}]
};
//配置图表数据
cat1.setOption(option1);
rf.setOption(optionRF);
//生成图表数组
mEcharts.push(cat1);
mEcharts.push(rf);
//图表resize自适应
$(window).resize(function() {
for (var i = 0; i < mEcharts.length; i++) {
mEcharts[i].resize();
}
});
//解决tab切换不显示问题 在加载窗口后重新渲染
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
console.log(e);
for (var i = 0; i < mEcharts.length; i++) {
console.log(e);
mEcharts[i].resize();
}
});
运行结果及报错内容
当浏览器窗口发生变化后，切换Tab，切换到的tab下的图表不能正常显示，canvas中的width一直是0（拖拽改变浏览器大小后，才能恢复）
我的解答思路和尝试过的方法
使用了 //解决tab切换不显示问题 在加载窗口后重新渲染，但是似乎事件不能监听到，console无日志输出
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
console.log(e);
for (var i = 0; i < mEcharts.length; i++) {
console.log(e);
mEcharts[i].resize();
}
});
我想要达到的结果
改变浏览器大小后，切换tab，图表可以正常加载出来
