关于echarts和tab结合,导致echarts宽度改变的问题

当一个页面中既有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放到一起,因人而异,看自己写代码的风格而定。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Swn_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值