如题所示,当我们在react中使用echarts图表时,偶尔会出现超出父级容器的情况,一般超出父级容器,不是因为图表绘制的方法调用问题,而是时机出现了问题,我们知道,react中页面渲染需要时间,通常render方法调用之后页面才会渲染出来,我们才能在页面调用echarts.init(ele),并且给图表设置配置项chart.setOption(option)。
而我们调用echarts的api生成图表的时机是在componentDidMount()这个生命周期里,表面看是会在render执行完成之后进行操作,但是我们通过实验,发现可能会出现元素虽然挂载了,但是布局还未完成就执行了componentDidMount()方法,我们可以看看超出父级容器时候的情形:
正常的场景应该如下所示:
可以看到,超出父级容器的图表比正常的图表移出父级容器很多,主要是他的尺寸变大了,我们通过F12检查元素可以看到超出父级容器的图表的宽度明显发生了变化:
为什么会出现这种情况,只能说明一个问题,就是父级元素还没有layout的时候,图表就开始生成,这时候他的宽度就不受默认layout的限制,而是会找到一个已经layout的最大的父级元素作为父级。等到真正的父级layout完毕,就超出了父级容器。
&