echarts图表隐藏之后再展示出现变形

问题描述:在使用echarts的过程中需要不同Tab页下展示不同的图标,如有Tab1,Tab2,在点击Tab2的时候,Tab1下的图表隐藏(我使用的是jQuery的hide和show方法),Tab1再点击展示的时候发现原来的图标变形了(准确的说是缩小了很多导致变形),上网搜索了很多方法,综合起来找到一个比较适合我需求的 ,最终解决了这个问题

做法:在完成echarts配置后,添加 $(window).resize(myChart.resize);这一句,这一句的意思是在dom发生变化的时候调用echarts的resize方法,重新设置大小,如:

var option4 = {//里面是echarts的配置}
myChart4.setOption(option4);
$(window).resize(myChart4.resize);

然后在调用show的地方触发添加的这个方法的触发语句$(window).trigger(‘resize’),(或者改为: $(window).resize()总之只要是resize的触发都可以)如下:

//prov就是tab页的id名,不重要
$("#prov").click(function () {
        $("#groupShow").hide();
        $("#provshow").show();
        //添加的就是下面这条resize的触发语句
        $(window).trigger('resize');
    })

经过测试,确实解决了我的问题

原理分析:echarts图表在隐藏的时候大小可能缩小到0,然后再展开的时候没有自适应大小,如果在echarts配置的时候就传进去固定的宽高值也能解决这个问题,但是图表就不能根据页面大小自适应大小了,因此我们需要一个重新设置大小且自适应大小的方案,网上还有一种方法是更改窗口变换的时间来解决这个问题,使用的是$(window).onresize()这个函数,思路是在tab页触发的时候调用$(window).onresize()然后写一个延时触发函数,在dom大小变化完成之后再触发后续操作,还有一种思路是将echars的初始化操作放到展示点击函数的触发函数中,但是我在实现这两个方法的时候出现了问题,最终选择使用现在的这种方法。

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值