react 里使用 antd modal对话框，加载echarts图表，无法显示

最新推荐文章于 2024-07-30 11:57:44 发布
原创 最新推荐文章于 2024-07-30 11:57:44 发布 · 2.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #react.js #前端

博客讨论了在使用React开发中遇到的Modal加载闪烁和Echarts图表加载问题。问题源于Modal的key动态变化导致的重复加载。修复措施包括稳定Modal的key，确保数据加载与Modal显示同步，以及解决Echarts渲染与数据更新的同步问题。修复后成功避免了地图加载多次的情况。

如题，我给modal对话框加了个key，并给key一个变化的量，

在这里插入图片描述

导致问题如下：

1、modal加载时会闪烁。原因猜测：因为usestate的时候，去请求了数据，导致数据又次更新，modal由于key不同再次加载，所以才闪烁
2、里面用了echarts图表，导致数据来了，echarts也生成了。但是页面重新加载了。导致数据又没了。echarts渲染的较快，无法显示在div上了
3、地图加载了多个

问题图片
在这里插入图片描述

修复后
在这里插入图片描述

echarts第一次打开没有数据，第二次打开就有数据了是什么原因，解决方法！
seeeeeeeeeee的博客
09-26 2477
情况说明：一般是你写死的数据表格可以显示出数据试图，等你改了发请求获取的数据后第一次打开就接受不到了。比如这种写法 series: [ { name: "能力图", type: "radar", data: [ { tooltip: { trigger: "item", },
ant-design V3升级V4记录（成功篇）
ime33的博客
01-16 3207
原因：babel版本兼容问题以及.babelrc文件配置，可在下方沿用我的babel相关版本。一是antd是一个开源性生态框架，人家社区一直在更新迭代，如果产品不及时更新，一直在使用不维护的，甚至有问题的框架，后果可想而知。原因：检查style-loader\less-loader\css-loader版本，挨个尝试。这篇博客没有一步步记录升级过程中的错误以及解决办法，所以只罗列的大致的错误项，希望对在升级之路上的你有所帮助。另外在我升级V4时，其实框架已经到了V5了，无奈升级到V5前，必须先升级V4。
antd中Modal弹框中使用分页出现遮罩闪烁问题解决办法
赵花花的博客
04-12 1376
antd中Modal弹框中使用分页出现遮罩闪烁问题解决办法
React｜Echarts｜Antd｜在Modal中展示echarts不显示的问题
skylar的博客
04-03 1136
解决方法：使用ref绑定div，dom存在时再draw。
关于echart-for-react在antd组件中初始化不展示的问题
weixin_44627459的博客
12-12 885
echart-for-react在antd中初始化不显示图表问题
ECharts在React+Antd用法及常见错误
01-08
最近项目中开始使用ECharts做图表，在React+Antd中使用Echart还是遇到了很多坑，希望记录下解决办法可以帮助到大家。由于初次使用，很多代码优化空间很大，希望大家能帮我提出，感恩～ 最终效果 1、实现点击折线图上...
饼状图，图表使用已经封装好的Echarts-For-React。用饼图表示人员的抢红包结果，并且实现按钮事件，每次点击展示本次抢红包的分配结果。
yzy103yzy的博客
01-12 346
import { Component } from 'react'; import { Button } from 'antd'; import ReactCharts from 'echarts-for-react'; type AppProps = {}; class Pie extends Component { constructor(props: AppProps) { super(props); //与render函数的onClick绑定，必须绑定，不然js找不到这两个函数.
一个帮助简化 antd Modal 状态管理的工具
fafafaz的博客
03-22 1158
一个帮助简化 antd Modal 状态管理的工具。
构建高效React管理后台：使用TypeScript和Hooks技术
标题中提到的“7-react-admin-ts：用react-hooks实现的管理后台”揭示了这是一个基于React技术栈的管理后台项目，利用了TypeScript和React Hooks来构建。React Hooks是React 16.8版本中引入的新特性，它允许函数组件...
react Ant Design项目常用官网参考汇总
JxufeCarol的博客
05-16 2754
本学期选修了一门《HTML5应用开发技术》，期间有个项目打卡是学习react项目（共享单车管理系统），主要是前端的项目实现。 该打卡项目以Ant Design为主，在学习的过程中查看了非常多的官网及其链接。 互联网时代，计算机技术更新是非常快的，包括ant design在内的各个组件/插件/文档也是迅速更新。因此在开发项目的过程中，官方文档显得尤为重要。 由此，写下这一篇博客，用来记录常用于react项目的官方链接，以便日后查看或者直接访问。 Ant Design 官方网址： 网址1（速度较慢）：htt.
echarts 初始化失败问题。
Roy121212的博客
01-07 1688
dom实例容器，一般是一个具有高宽的div元素。注：如果div是隐藏的，ECharts 可能会获取不到div的高宽导致初始化失败，这时候可以明确指定div的style.width和style.height，或者在div显示后手动调用echartsInstance.resize调整尺寸。ECharts 3 中支持直接使用canvas元素作为容器，这样绘制完图表可以直接将 canvas ...
弹层echarts 图表不展示
wang08212005的博客
04-15 1364
1.点击按钮出现弹层，弹层里面放置echarts图表，发现图表不展示 解决办法：点击按钮先拿到图表需要展示的数据， 延迟绘制图形这样就可以展示
解决ECHARTS切换图表获取不到width跟height的问题
qq_28053177的博客
10-14 4037
最近用到ECHARTS,一个非常强大的图表插件,但是在将图表隐藏后在显示时候会出现获取不到宽高的情况,网上有重新设置宽高的方法,我没有试过,我个人的解决方法是在初始化完成时在将要隐藏的图表隐藏起来,这样宽跟高都是已经获取后才去隐藏的,所以切换时能正常显示,也不会报宽高获取不到的错误 <div class="gram"> <span id="histogram" class
ant design +vue关于二级弹框添加echart图不显示的问题
Sara0064的博客
12-17 1634
如果你执着修复一个bug并且没有思路，那就请教一下身边的人，我也希望好好努力，去寻找一个志同道合的团队。 效果是这样，二级弹框中点击查看结果，出现表格数据和词云echarts，可是我怎么都出现不了，刚开始报错 就是用js用获取绘制的echarts图时，获取的id是html的dom没有渲染，所以解析不出来。因为在二级弹框里，所以刚开始加载页面的时候，弹框也没有打开，就找不到弹框相应的id,所以渲...
bootstrap模态框中的不显示echarts折线图，解决方案
醉殇姒若梦遗年 ツ的博客
03-16 1547
<div class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">统计</h5>
解决AntDesign中Modal模态框中Echarts找不到dom
appleXiaodu的博客
05-30 2300
1. AntDesign for React <Modal wrapClassName="wrapClassName" title="asdf" visible={this.state.visible} onOk={this.handleOk.bind(this)} onCancel={this.han...
react在子组件弹框中使用echarts图，首次打开弹窗没有问题，第二次及后续打开弹窗echrts图只有100px
最新发布
asbeela的博客
07-30 392
下一次打开弹窗后，echarts渲染逻辑执行更早，导致问题发生，可以给子组件加上key属性，值为数据id等方法，使得子组件重新渲染。拿不到dom节点，导致echarts大小为默认的100px大小，手动改变浏览器窗口大小触发了resive方法后即正常。1.通过echarts实例手动在合适时机调用resive方法，比如setstate后，或者onchartReady时，重新再resize一次。在子组件弹框中使用echarts图，通过props从父组件传递数据id等数据，从后端查询数据并渲染echarts。
基于Antd的模态框modal不显示 确认和取消按钮
cat_want_fly的博客
08-10 7071
基于Antd的模态框modal不显示 确认和取消按钮
react+antd 解决Modal首次打开ReactECharts图表100%变为100px的问题
小白的博客
02-25 402
使用setTimeout去解决Modal首次打开ReactECharts图表100%变为100px的问题
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值