一、问题描述
我有两个选项卡,一个用来显示Echarts图表,一个用来显示Echarts图表的数据源
但是我切换到数据源的选项卡后再改变浏览器窗口大小时,这是再切换回echarts图表的选项卡就会出现:
可以看到,图形渲染失败了
二、解决方案:
var charts=[];
var injectionWaterChart=echarts.init(document.getElementById('echarts_InjectionWater'));
var pressChart=echarts.init(document.getElementById('echarts_Press'));
var createDaysChart=echarts.init(document.getElementById('echarts_CreateDays'));
charts.push(injectionWaterChart);
charts.push(pressChart);
charts.push(createDaysChart);
//解决tab切换后改变窗口大小时不显示问题 在加载窗口后重新渲染。
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var activeTab = $(e.target)[ 0 ].hash;
if (activeTab=='#tab-1'){
for(var i=0;i<charts.length;i++){
charts[i].resize(); //适应div大小
}
}
}); //data-toggle="pill还是data-toggle="tab" 根据前面所用标签页的不同来选择
就是再次切换回图表选项卡的时候,调用restore()方法,将图表数据还原即可,那个tab-1是我图表选项卡中tab标签的id。
三、拓展
参考链接:https://www.runoob.com/bootstrap/bootstrap-tab-plugin.html