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

打开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);
}
相关推荐
DanB2432 分钟前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~10 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
安心不心安11 小时前
React hooks——useReducer
前端·javascript·react.js
像风一样自由202011 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
啃火龙果的兔子11 小时前
react19+nextjs+antd切换主题颜色
前端·javascript·react.js