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

news/2024/7/15 17:03:11 标签: react.js, echarts, javascript

打开modal时echarts部分空白:

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

javascript">           <div
              id="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.niftyadmin.cn/n/5468700.html

相关文章

SCI一区 | Matlab实现BES-TCN-BiGRU-Attention秃鹰算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测

SCI一区 | Matlab实现BES-TCN-BiGRU-Attention秃鹰算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测 目录 SCI一区 | Matlab实现BES-TCN-BiGRU-Attention秃鹰算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测预测效果基本介绍模型描述程序…

Pytest教程:一文了解如何使用 pytest_runtest_makereport 修改 Pytest 测试报告内容

在软件测试过程中&#xff0c;生成清晰、易读的测试报告对于团队交流、问题追踪和项目进度评估至关重要。Pytest 是一个功能强大的 Python 测试框架&#xff0c;它不仅支持丰富的断言和测试用例组织方式&#xff0c;还提供了灵活的插件系统和钩子函数&#xff0c;可以帮助我们定…

论享视app的平台共创宣言学习记录

序言&#xff1a;下面内容摘自享视app宣言&#xff08;学习&#xff09; 目前现状 能者多劳&#xff0c;多劳多得&#xff0c;本是公平正义之言:商人的智慧能力高低&#xff0c;努力付出多寡&#xff0c;决定其商业成就的大小。 但这些必须建立在公平诚信的生产要素和制度环境…

全面的Docker快速入门教程(详细)

前言&#xff1a; 都2024年了&#xff0c;你还在为了安装一个开发或者部署环境、软件而花费半天的时间吗&#xff1f;你还在解决开发环境能够正常访问&#xff0c;而发布测试环境无法正常访问的问题吗&#xff1f;你还在为持续集成和持续交付&#xff08;CI / CD&#xff09;工…

Unity进阶之路(2)UI Toolkit

UI Toolkit是Unity内置的一个游戏UI解决方案。借鉴了web前端的设计模式。 web前端使用css&#xff0c;html&#xff0c;js。 其中css定义样式 html定义层级 js处理逻辑 UI Toolkit则是使用uss&#xff0c;uxml&#xff0c;C# 如果直接使用Unity提供的可视化UI创建工具创建…

android 14 apexd分析(2)apexd 启动

1. class main进程一起启动&#xff0c; apexservice是他提供的binderservice&#xff0c;这也第二阶段的最主要的作用 /system/apex/apexd/apexd.rc?r3c8e8603c640fc41e0406ddcf981381803447cfb#1 1 service apexd /system/bin/apexd 2 interface aidl apexservice …

mac 上通过命令行挂载NTFS硬盘,使其可以进行读写

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1. 安装 osxfuse 和 ntfs-3g2. 挂载 NTFS 硬盘3. 卸载 NTFS 硬盘4. 自动挂载1. 找出设备UUID2. 编辑 /etc/fstab 文件3. 添加挂载信息4. 保存并退出编辑器5. 重…

重置gitlab root密码

gitlab-rails console -e production user User.where(id: 1).first user User.where(name: "root").first #输入重置密码命令 user.password"admin123!" #再次确认密码 user.password_confirmation"admin123!" #输入保存命令&am…