【React+Typescript+Antd】Echarts滑动卡顿问题解决

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

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

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

代码如下：

代码语言：javascript复制

        <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代表全屏充满。

代码语言：javascript复制

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

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

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

echarts 图表

0 人点赞