问Echarts 实現自定义svg平面图报錯？

我在react 框架用echarts render 自定义的svg平面圖

但是總报錯「cannot read properties of undefined (reading regions)」

以下是源碼和相對的svg, 希望各位可以指點指點新手

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 }

]

}

]

}

const renderMap = (myChart) => {

/*const renderedMapInstance = echarts.getInstanceByDom(ref.current);

if (renderedMapInstance) {

mapInstance = renderedMapInstance;

} else {

mapInstance = echarts.init(ref.current);

}

mapInstance.setOption(option);*/

myChart.setOption(option)

};

useEffect(() => {

fetch(mapData)

.then((response) => response.text())

.then((svgText) => {

echarts.registerMap("testing", { svg: svgText });

});

var chartDom = document.getElementById('beef');

var myChart = echarts.init(chartDom);

renderMap(myChart);

}, []);

/*

useEffect(() => {

window.onresize = function () {

};

return () => {

mapInstance && mapInstance.dispose();

};

}, []); mapInstance.resize();

*/

return (

<div>

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

</div>

);

}

————————————————————

Svg

<svg

xmlns="http://www.w3.org/2000/svg"

width="591"

height="373"

preserveAspectRatio="xMidYMid meet"

viewBox="0 0 376 237"

>

<g transform="translate(-7.69,10.06)">

<path

d="m 536.375,106.46875 c 5.2885,14.34201 10.52945,33.1769 13.78125,43.21875 -0.0655,0.0771 -0.13181,0.1476 -0.21875,0.21875 l 16.5625,0.9375 10.5,-8.5 11,-17 -13.5,-18 -38.125,-0.875 z"

stroke="#A5A5A5"

stroke-width="0.75"

stroke-linecap="round"

fill="#FFFFFF"

fill-rule="evenodd"

id="path3702"

name="Langue"

transform="matrix(0.6362812,0,0,0.6362812,7.6936433,-10.065285)"

/>

</g>

</svg>

謝謝