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

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

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

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

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

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

&