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);
}
相关推荐
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way7 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
小白变怪兽10 小时前
一、react18+项目初始化(vite)
前端·react.js
GISer_Jing11 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆11 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding12 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js