layui整合echarts容器宽度设置100%出现挤压问题

使用layui写前端,使用echarts时,设置容器的宽度为100%时,渲染出来的图表被挤压现象(实际渲染出来的图表宽高分别为100px,100px),
如图:
容器设置了宽度100%
在插入图片描述
显示的效果:在这里插入图片描述
其实解决方案是我们可以在图表被渲染前,手动指定容器的宽度:
在这里插入图片描述
但是使用layui我碰到的问题是点击收缩左侧导航,整体屏幕宽度变大,表格宽度依旧是手动指定的那个宽度1100px,导致问题的出现:
在这里插入图片描述出现了宽度不能自适应,因为我们在表格显示之前指定了它显示的宽度为1100px,所以即使使用了官方的resize()方法来自适应宽度,依然不能实现自适应目的。
所以可以在表格渲染完后再次设置它的宽度为100%,就是把未渲染前指定的宽度(1100px)在渲染完表格后设置为宽度(100%),这样当容器的宽度改变的时候可以使用resize()函数对表格进行自适应屏幕宽度。
在这里插入图片描述
这样就会把前面的1100px覆盖为100% 从而达到layui使用echarts 收缩左侧导航 自适应表格显示

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值