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

最新推荐文章于 2024-05-17 16:07:17 发布
最新推荐文章于 2024-05-17 16:07:17 发布
阅读量2.2k 收藏 1
点赞数
文章标签： vue react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37766810/article/details/121634294
版权

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

在这里插入图片描述

导致问题如下：

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

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

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

这个昵称也不能用吗？
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue中使用echarts实现地图自定义浮窗内容及样式
upStar1的博客
05-26 6977
最近项目需要用到地图，echarts本来是有地图的，但是5.0版本之后就没有了，所以如果要用echarts中的地图，需要下载5.0版本之前的地图。 项目需要在点击某一地区，就出现该地区指定的数据。 1.首先导入echarts（需要全局导入，全局导入可以看之前的文章vue项目引入element ui、iview和echarts_芝士焗红薯的博客-CSDN博客，使用到echarts的页面还需要单独引入）和地图，我这里用的地图是在DataV.GeoAtlas地理小工具系列这个网站下载的。 <scri
Echarts 雷达图 鼠标移入标签名 显示悬浮框
qq_55042538的博客
04-28 1664
Echarts 雷达图 鼠标移入标签名 显示悬浮框
ECharts在React+Antd用法及常见错误
01-08
最近项目中开始使用ECharts做图表，在React+Antd中使用Echart还是遇到了很多坑，希望记录下解决办法可以帮助到大家。由于初次使用，很多代码优化空间很大，希望大家能帮我提出，感恩～ 最终效果 1、实现点击折线图上的点联动两个饼图数据 2、处理ECharts饼图数据为0或者是空时饼图消失问题 2、 在对ECharts图表进行init // 饼图初始option const initPieOption = { // tooltip: { // show: false, // }, dataset: { dimensions: ['de
弹层echarts 图表不展示
wang08212005的博客
04-15 1257
1.点击按钮出现弹层，弹层里面放置echarts图表，发现图表不展示 解决办法：点击按钮先拿到图表需要展示的数据， 延迟绘制图形这样就可以展示
Ant Design 中 的Modal全屏显示
最新发布
【爱打盹的喵】的专栏
05-17 869
全文参考，并结合自己的项目具体情况而来，本意是用来记录自己在做此功能时遇到的问题。
Echarts 的悬浮框tooltip显示自定义格式化
qq_40286424的博客
01-06 680
文章地址：https://www.cnblogs.com/shizhijie/p/8805757.html 效果： 部分代码： tooltip: { trigger: "axis", backgroundColor: "rgba(255,255,255,0.1)", axisPointer: { type: "shadow", label: { show:
React中的ECharts
hello_helloworld的博客
08-31 2098
react中的echarts-实时渲染-echarts-for-react，介绍了如何使用ECharts图表库，如何使用ECharts的react封装库，如何在实践中使用ECharts，如何结合定时器与ECharts制造出动态效果
react hooks 中使用 Echarts图表中遇到的问题及相关配置
二三的博客
01-30 1716
项目开发中，需要做一个报表功能，看了下UI图，初步定下使用echarts，不过之前使用echarts都是在Vue2和Vue3框架下开发，第一次使用开发 echarts，将流程及一些 相关配置 写个随笔记录下。
echarts的tooltip悬浮窗的自定义
zero00122的博客
11-30 3386
如果真正自定义echarts的tooltip悬浮窗
React Native使用百度Echarts显示图表的示例代码
08-28
React Native 使用百度 Echarts 显示图表的示例代码 React Native 是一个由 Facebook 开发的跨平台移动应用框架，使用 JavaScript 和 React 语法来编写移动应用。Echarts 是百度推出的免费开源的图表组件，功能丰富...
react-accessible-modal:React的可访问模式对话框组件
05-18
React-accessible-modal是一款专为React设计的可访问性模式对话框组件，它旨在提供符合Web内容无障碍指南（WCAG）标准的弹出模态框，确保视觉障碍的用户也能顺畅地使用应用。然而，根据提供的描述，这个组件已经不再...
react配置antd按需加载的使用
10-17
主要介绍了react配置antd按需加载的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-st-modal：用于React JS的简单灵活的模式对话框组件
02-04
React St Modal是一个...st-modal/入门安装您可以使用npm安装最新版本： npm install react-st-modal总览为了实现模式对话框的功能，该库具有四个功能和一个React组件。 功能Alert ， Confirm ， Prompt实施现有浏览
在Ant Design Pro（React）中使用ECharts
rs勿忘初心的博客
03-21 7326
使用Ant Design Pro解决方案可以快速搭建前端框架，而ECharts是前端最流行，功能最强大的前端图表库。 下面将讲解下如何在Ant Design Pro使用ECharts。 Ant Design Pro本身是通过Webpack进行打包的，而ECharts本身也提供了Webpack的安装方式，因此我们仅需要通过npm命令进行安装即可： npm install echarts --...
Echarts鼠标悬浮显示数据详细介绍
azhe5201314的专栏
08-30 2万+
Echarts鼠标悬浮显示数据
echarts 鼠标悬浮提示
热门推荐
Alex81320的博客
12-26 4万+
echarts 鼠标悬浮提示
echarts 关于图表悬浮后出现的数据带单位
weixin_45729937的博客
09-28 1967
echarts 关于图表悬浮后出现的数据带单位
echarts 悬浮框tooltip 添加点击事件
小码蚁
07-14 2753
echarts代码 tooltip: { trigger: 'axis', triggerOn: 'click',//点击才会出现提示框 enterable: true,//鼠标可以进入提示框 formatter: function(params) { let returnData = '' if (params.length == 1) {.
el-drawer中使用echarts图不展示
weixin_52443895的博客
09-19 372
在父组件中控制子组件中的el-drawer显示，el-drawer正常显示，echarts无法展示。图放在el-drawer中，这个el-drawer放在子组件中，被父组件使用。1、 在子组件中的mounted中进行echarts图初始化。2、 在子组件中的mounted中的。3、 初始化echarts容器使用。进行echarts图初始化。在我的代码中，以上方式。
echarts悬浮提示框之formatter 函数
嗯哼
07-27 2万+
要求：在图表用条形图显示一部分数据，其余数据采用悬浮提示框显示。 说明：在echarts中的series要求的数据格式如下   series: [         {             name: '直接访问',             type: 'bar',             stack: '总量',             label: {                 no...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值