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

Bertha 。 2023-06-19 09:39 250阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2][]     为什么会出现这种情况，只能说明一个问题，就是父级元素还没有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样式，也不会出现这个超出父级容器的问题。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191205152201376.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191205152240231.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191205152802856.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70