【React+Typescript+Antd】Echarts滑动卡顿问题解决
【React+Typescript+Antd】Echarts滑动卡顿问题解决
毛大姑娘
发布于 2020-09-10 15:43:58
发布于 2020-09-10 15:43:58
项目开发过程中，我遇到“多个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>虽然不知道原理，但是确实解决了问题。
有知道原因，或者有更好办法的大佬可以指导一下，感谢！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019年11月05日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读