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

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

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

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

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

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

    当我们知道是因为生成图表的时机问题的时候，我们就比较容易解决了，这种问题其实就是一个异步的问题，我们可以设置一个简单的超时函数setTimeout(callback,timeout)来解决这个问题 。如下所示，我的解决办法就是这样的。

import React from 'react';
import {Row,Col} from 'antd';
import 'antd/dist/antd.css';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import styles from  './styles.module.css';
class Main extends React.Component{
    componentDidMount(){
      var _this = this;
      setTimeout(function(){
        _this.initChart();
      },20);
    }
    initChart(){
      var myChart = echarts.init(document.getElementById('bar1'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    render(){
      return (
        <div>
            <Row>
                <Col span={24}>
                     <h2>hello,main.</h2>
                </Col>
                <Col span={24}>
                    <div className={styles.chartWrap}>
                        <div id="bar1" className={styles.bar1}></div>
                    </div>
                </Col>
            </Row>
        </div>
      )
    }
}
export default Main;

    这样，无论你如何刷新页面，都不会出现图表超出父级容器的问题了。

    一般而言，使用vue或者react会容易出现这个问题，原因是我们的模板并不是一开始就生在html页面中，而是需要经过人为渲染，渲染需要时间，而且当我们使用自适应布局的时候会出现，总之就是图表生成的时机早于父级元素layout的时机，如果我们一开始就给父级元素设置一个width样式，也不会出现这个超出父级容器的问题。