React Echarts渲染自定义SVG热力图报错：regions未定义

错误原因分析 #

出现该错误的核心原因是异步加载SVG地图数据后，未等待地图注册完成就初始化并渲染Echarts图表。Echarts在调用setOption时，找不到已注册的"testing"地图，导致内部读取regions属性时触发undefined错误。

具体修复步骤 #

1. 确保SVG地图注册完成后再渲染图表 #

将图表初始化和渲染逻辑移到fetch的then回调链中，保证echarts.registerMap执行完成后再调用setOption：

import React, { useRef, useEffect } from "react";
import * as echarts from "echarts";
import mapData from "./map.svg";

export default function Heatmap() {
  const ref = useRef(null);
  let mapInstance = null;

  const option = {
    tooltip: {},
    visualMap: {
      left: 'center',
      bottom: '10%',
      min: 5,
      max: 100,
      orient: 'horizontal',
      text: ['', 'Price'],
      realtime: true,
      calculable: true,
      inRange: {
        color: ['#dbac00', '#db6e00', '#cf0000']
      }
    },
    series: [
      {
        name: 'French Beef Cuts',
        type: 'map',
        map: 'testing',
        roam: true,
        emphasis: {
          label: {
            show: false
          }
        },
        selectedMode: false,
        data: [
          { name: 'Queue', value: 15 },
          { name: 'Langue', value: 35 },
          { name: 'Plat de joue', value: 15 },
          { name: 'Gros bout de poitrine', value: 25 },
          { name: 'Jumeau à pot-au-feu', value: 45 },
          { name: 'Onglet', value: 85 },
          { name: 'Plat de tranche', value: 25 },
          { name: 'Araignée', value: 15 },
          { name: 'Gîte à la noix', value: 55 },
          { name: "Bavette d'aloyau", value: 25 },
          { name: 'Tende de tranche', value: 65 },
          { name: 'Rond de gîte', value: 45 },
          { name: 'Bavettede de flanchet', value: 85 },
          { name: 'Flanchet', value: 35 },
          { name: 'Hampe', value: 75 },
          { name: 'Plat de côtes', value: 65 },
          { name: 'Tendron Milieu de poitrine', value: 65 },
          { name: 'Macreuse à pot-au-feu', value: 85 },
          { name: 'Rumsteck', value: 75 },
          { name: 'Faux-filet', value: 65 },
          { name: 'Côtes Entrecôtes', value: 55 },
          { name: 'Basses côtes', value: 45 },
          { name: 'Collier', value: 85 },
          { name: 'Jumeau à biftek', value: 15 },
          { name: 'Paleron', value: 65 },
          { name: 'Macreuse à bifteck', value: 45 },
          { name: 'Gîte', value: 85 },
          { name: 'Aiguillette baronne', value: 65 },
          { name: 'Filet', value: 95 }
        ]
      }
    ]
  };

  useEffect(() => {
    const chartDom = ref.current;
    if (!chartDom) return;

    fetch(mapData)
      .then(response => response.text())
      .then(svgText => {
        echarts.registerMap("testing", { svg: svgText });
        mapInstance = echarts.init(chartDom);
        mapInstance.setOption(option);
      });

    return () => {
      if (mapInstance) {
        mapInstance.dispose();
        mapInstance = null;
      }
    };
  }, []);

  return (
    <div>
      <div style={{ width: "100%", height: "50vh" }} ref={ref} id='beef'></div>
    </div>
  );
}

2. 优化SVG地图的兼容性（可选） #

确保SVG中的每个区域元素（path）的name属性与Echarts数据中的name完全匹配，避免存在拼写错误或大小写不一致的情况。

3. 添加窗口 resize 适配（可选） #

如果需要图表随窗口大小自动调整，可在useEffect中添加resize监听：

useEffect(() => {
  const chartDom = ref.current;
  if (!chartDom) return;

  fetch(mapData)
    .then(response => response.text())
    .then(svgText => {
      echarts.registerMap("testing", { svg: svgText });
      mapInstance = echarts.init(chartDom);
      mapInstance.setOption(option);
    });

  const handleResize = () => {
    mapInstance?.resize();
  };
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
    mapInstance?.dispose();
    mapInstance = null;
  };
}, []);

内容的提问来源于stack exchange，提问作者Carson