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);
}
相关推荐
普郎特7 分钟前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
一枚前端小能手38 分钟前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码39 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
鹏多多1 小时前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
uhakadotcom1 小时前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
Mintopia1 小时前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc
2503_928411561 小时前
9.15 ES6-变量-常量-块级作用域-解构赋值-箭头函数
前端·javascript·es6
Mintopia1 小时前
Next.js 单元测试究竟该选 JTest 还是 Vitest?
前端·javascript·next.js
遂心_1 小时前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_1 小时前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js