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

黛玉戴玉逮鱼

于 2024-04-03 17:52:24 发布

阅读量820

点赞数 6

分类专栏： echarts 文章标签： react.js echarts javascript

本文链接：https://blog.csdn.net/weixin_44730335/article/details/137353444

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了如何在React中使用ref和条件渲染避免ECharts图表在modal打开时出现空白的问题，通过在modal内容存在时调用`drawChart`函数初始化或更新图表。

摘要由CSDN通过智能技术生成

打开modal时echarts部分空白：

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

           <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);
}