react中使用echarts生成图表时会超出父级容器问题解决

    如题所示,当我们在react中使用echarts图表时,偶尔会出现超出父级容器的情况,一般超出父级容器,不是因为图表绘制的方法调用问题,而是时机出现了问题,我们知道,react中页面渲染需要时间,通常render方法调用之后页面才会渲染出来,我们才能在页面调用echarts.init(ele),并且给图表设置配置项chart.setOption(option)。

    而我们调用echarts的api生成图表的时机是在componentDidMount()这个生命周期里,表面看是会在render执行完成之后进行操作,但是我们通过实验,发现可能会出现元素虽然挂载了,但是布局还未完成就执行了componentDidMount()方法,我们可以看看超出父级容器时候的情形:

    正常的场景应该如下所示:

     可以看到,超出父级容器的图表比正常的图表移出父级容器很多,主要是他的尺寸变大了,我们通过F12检查元素可以看到超出父级容器的图表的宽度明显发生了变化:

     为什么会出现这种情况,只能说明一个问题,就是父级元素还没有layout的时候,图表就开始生成,这时候他的宽度就不受默认layout的限制,而是会找到一个已经layout的最大的父级元素作为父级。等到真正的父级layout完毕,就超出了父级容器。

&

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

luffy5459

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

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

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

打赏作者

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

抵扣说明:

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

余额充值