React|Echarts|Antd|在Modal中展示echarts不显示的问题

打开modal时echarts部分空白:

解决方法:使用ref绑定div,dom存在时再draw

           <divid="quintuple"style={{width: "450px",height: "350px",}}ref={modalRef}/>const modalRef = (obj) => {if (obj) {drawChart(obj, [{value: [info.question || 10,info.theoretical_method || 10,info.practical_method || 10,info.effects || 10,info.conclusion || 10,],},]);}};function drawChart(dom, data) {let myChart = echarts.getInstanceByDom(dom); //有的话就获取已有echarts实例的DOM节点。if (myChart == null) {// 如果不存在,就进行初始化。myChart = echarts.init(dom);}//此处省略数据处理过程let option = {angleAxis: {startAngle: 0,},radiusAxis: {type: "value",min: 0,max: 100,z: 1,},polar: {radius: 100,},radar: {shape: "circle",radius: 100,color: "black",indicator: [{name: "Problem",max: 100,},{name: "Theoretical Method",max: 100,},{name: "Practical Method",max: 100,},{name: "Effects",max: 100,},{name: "Conclusion",max: 100,},],axisName: {color: "black",},axisNameGap: 20,},series: [{// name: "Five-dimensional analysis",type: "radar",data: data,areaStyle: {color: "#0068c9",opacity: 0.2,},label: {show: true,},},],};option && myChart.setOption(option);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/792094.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PAC的架构细节

PAC的架构细节&#xff1f;硬件原理&#xff1f;PAC如何生成&#xff1f;如何检查&#xff1f;指令集&#xff1f;本博客探讨这些问题。

2024.3.7力扣每日一题——找出字符串的可整除数组

2024.3.7 题目来源我的题解方法一 使用 BigInteger类&#xff08;超时&#xff09;方法二 数学 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2575 我的题解 方法一 使用 BigInteger类&#xff08;超时&#xff09; 将字符串转换为BigInteger类 import java.math.BigI…

Java集合(个人整理笔记)

目录 1. 常见的集合有哪些&#xff1f; 2. 线程安全的集合有哪些&#xff1f;线程不安全的呢&#xff1f; 3. Arraylist与 LinkedList 异同点&#xff1f; 4. ArrayList 与 Vector 区别&#xff1f; 5. Array 和 ArrayList 有什么区别&#xff1f;什么时候该应 Array而不是…

已解决org.apache.lucene.store.AlreadyClosedException: 已经关闭异常的正确解决方法,亲测有效!!!

已解决org.apache.lucene.store.AlreadyClosedException: 已经关闭异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 一、问题分析 二、报错原因 三、解决思路 四、解决方法 五、总结 博主v&#xff1a;XiaoMing_Java 一、问题分析 当…

Prometheus+grafana环境搭建方法及流程两种方式(docker和源码包)(一)

1.选型对比 最近项目上有对项目服务及中间件的监控需求&#xff0c;要做实现方案调研&#xff0c;总结一下自己的成果&#xff0c;目前业界主流可选的方案有&#xff1a; 国外开源&#xff1a; Prometheus&#xff1a;Prometheus - Monitoring system & time series dat…

前端订阅后端推送WebSocket定时任务

0.需求 后端定时向前端看板推送数据&#xff0c;每10秒或者30秒推送一次。 1.前言知识 HTTP协议是一个应用层协议&#xff0c;它的特点是无状态、无连接和单向的。在HTTP协议中&#xff0c;客户端发起请求&#xff0c;服务器则对请求进行响应。这种请求-响应的模式意味着服务器…

【史上最细教程】 Typora+PicGo+Gitee 实现发给别人的Typora笔记也能看到图片

文章目录 问题描述前提准备&#xff1a;操作步骤&#xff1a;1.Gitee新建项目作为图床、获取仓库访问密钥2.PicGo连接Gitee图床3.Typora连接PicGo 问题描述 Typora记录的笔记&#xff0c;图片保存默认在本地&#xff0c;这时候复制出来上传CSDN、或发给别人的时候图片就是空链…

HCIP实验--5

实验要求&#xff1a; 实现过程&#xff1a; &#xff08;一&#xff09;配置IP地址&#xff1a; AR1: [AR1]int g0/0/0 [AR1-GigabitEthernet0/0/0]ip add 200.1.1.1 24 Apr 3 2024 19:25:38-08:00 AR1 %%01IFNET/4/LINK_STATE(l)[0]:The line protocol IP on the interf…

C++基础13:C++输入输出

此专栏为移动机器人知识体系下的编程语言中的 C {\rm C} C从入门到深入的专栏&#xff0c;参考书籍&#xff1a;《深入浅出 C {\rm C} C》(马晓锐)和《从 C {\rm C} C到 C {\rm C} C精通面向对象编程》(曾凡锋等)。 12.C输入/输出 12.1 C流类 计算机的输入和输出是数据传送的过…

Vue.js---------Vue基础

能够说出Vue的概念和作用能够使用vue/cli脚手架工程化开发能够熟练Vue指令 一.vue基本概念 1.学习vue Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 渐进…

间接调制和带通采样!!(非奈奎斯特采样定理)

1. 直接变频 前面讲解数字调制原理时&#xff0c;直接利用IQ调制将基带信号变换为频带信号&#xff0c;这种频率变换一般被称为直接上变频&#xff1b;解调时&#xff0c;直接利用IQ解调&#xff0c;将频带信号变换回基带信号&#xff0c;这种频率变换一般被称为直接下变频。直…

C# 系统学习(异步编程)

在C#中&#xff0c;异步编程是一种优化程序性能的关键技术&#xff0c;特别是在处理I/O密集型操作&#xff08;如网络请求、数据库查询、文件读写等&#xff09;时&#xff0c;能够有效避免由于长时间等待而导致的线程阻塞&#xff0c;从而提高应用的响应速度和资源利用率。asy…

LeetCode hot100-21

240. 搜索二维矩阵 II编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a;每行的元素从左到右升序排列。每列的元素从上到下升序排列。这题很神奇&#xff0c;因为暴力解法都可以通过 class Solution {public boolean search…

vue 使用自定义标签URL Protocol 调用本地exe 并传参

创建注册表文件reg&#xff0c;并运行 里面的路径需要替换成实际exe的绝对路径 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\App] "URL:App Protocol Handler" "URL Protocol""" [HKEY_CLASSES_ROOT\App\DefaultIcon] &qu…

pycharm调试(步过(Step Over)、单步执行(Step Into)、步入(Step Into)、步出(Step Out))

pycharm调试 pycharm调试 pycharm调试为什么要学会调试&#xff1f;1. 步过 (Step Over)2. 单步执行 (Step Into)3. 步入&#xff08;Step Into&#xff09;4. 步出&#xff08;Step Out&#xff09; 为什么要学会调试&#xff1f; 调试可以帮助初学者更深入地理解编程基础&am…

【Android、 kotlin】kotlin学习笔记

基本语法 fun main(){val a2var b "Hello"println("$ (a - 1} $b Kotlin!")} Variables 只赋值一次用val read-only variables with val 赋值多次用var mutable variables with var Standard output printin() and print() functions String templ…

NKCTF2024 re VM?VM!WP

逻辑似乎很简单&#xff08;个鬼啊&#xff09; 这个函数是把输入的字符转化为二进制并倒序存储 sub_1570太大了加载不出来&#xff0c;应该是加密的主逻辑&#xff0c;目的是需要输出1 可以通过删除栈的方法强行转化伪代码 首先删掉这部分 9A0改小点 这个也是 栈这里U一下再…

快手2024春季招聘揭秘!最全面的Spring RESTful Web面试题大全,学会这些让你面试无压力!

随着Spring框架在构建现代Web应用中的广泛应用&#xff0c;对于掌握如何高效地使用Spring来创建RESTful Web服务的需求日益增长。特别是在快手这样的创新和技术驱动的公司&#xff0c;深入理解Spring RESTful Web服务的开发不仅是通过技术面试的关键&#xff0c;更是在日后的工…

DFS:深搜+回溯+剪枝解决组合问题

创作不易&#xff0c;感谢支持!!! 一、电话号码的组合 . - 力扣&#xff08;LeetCode&#xff09; class Solution { public:string hash[10]{"","","abc","def","ghi","jkl","mno","pqrs"…

爬虫部署平台crawlab使用说明

Crawlab 是一个基于 Go 语言的分布式网络爬虫管理平台&#xff0c;它支持 Python、Node.js、Jar、EXE 等多种类型的爬虫。 Crawlab 提供了一个可视化的界面&#xff0c;并且可以通过简单的配置来管理和监控爬虫程序。 以下是 Crawlab 的一些主要优点&#xff1a; 集中管理&am…