项目开发过程中,我遇到“多个Echarts图表在网页上高度超过一屏时,页面滑动卡顿”的问题。

网上找了一些资料,都显示只在手机上会出现滑动卡顿,并没有数据说明在pc端也会卡顿。

自己摸索了半天,最后,通过在图表布局外面嵌套Row和Col组件,解决了卡顿问题。

代码如下:

        <Content style={{ background: 'none', padding: 0, margin: 24 }}>
            <div className="pd-content">
                <Row>
                    <Col span="24">
                        <div className="pd-panel">
                            <ProjectDetailPanelCICD />
                        </div>
                        <div className="pd-panel">
                            <ProjectDetailPanelLint />
                        </div>
                        <div className="pd-panel">
                            <ProjectDetailPanelAutoTest />
                        </div>
                    </Col>
                </Row>
            </div>
        </Content>

其中
<ProjectDetailPanelCICD />
<ProjectDetailPanelLint />
<ProjectDetailPanelAutoTest />
是我的三个图表组件。

在这些图表组件外面套了Row和Col,Col设置为24代表全屏充满。

                <Row>
                    <Col span="24">
                       
                    </Col>
                </Row>

虽然不知道原理,但是确实解决了问题。

有知道原因,或者有更好办法的大佬可以指导一下,感谢!