当一个页面中既有echarts又有Tab标签,且echarts图不止一个时,会出现下面的问题。
改变窗口大小时,当前页面的图resize正常,而此刻切换到另外一个有图的tab时,却发现该图的尺寸不正常了!这一问题的原因是当改变窗口大小时,只能获取到当前页面的chart元素,其他页面获取不到,因此它的尺寸发生变化。解决方案如下:
1、首先给tab添加点击事件
$('a').click(function(e) {
if(e.target.hash == '#tabContent1'){
window.onresize1();
}else if(e.target.hash == '#tabContent3'){
window.onresize3();
}
})
2、定义这两个函数
window.onresize1 = function(){
myCharts1.resize();
}
window.onresize3 = function(){
myCharts3.resize();
}
这样就解决了切换图尺寸变化的问题。
当然也可以定义一个函数,将两个图的resize放到一起,因人而异,看自己写代码的风格而定。