Cannot read properties of undefined (reading 'regions')

[skriniar]

Version

5.3.2

Link to Minimal Reproduction

No response

Steps to Reproduce

echarts5.3.2版本绘制中国地图

Current Behavior

本地运行无 打包之后报错Cannot read properties of undefined (reading 'regions') 地图不展示

Expected Behavior

地图正常展示

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[echarts-bot[bot]]

@skriniar It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

**BODY** ### Version 5.3.2 ### Link to Minimal Reproduction _No response_ ### Steps to Reproduce The echarts5.3.2 version draws a map of China ### Current Behavior Local operation without error Cannot read properties of undefined (reading 'regions') after packaging, the map is not displayed ### Expected Behavior The map is displayed normally ### Environment ````markdown - OS: - Browser: - Framework: ```` ### Any additional comments? _No response_

[echarts-bot[bot]]

@skriniar Please provide a demo for the issue either with https://codepen.io/Ovilia/pen/dyYWXWM , or https://codesandbox.io/s/mystifying-bash-2uthz.

[echarts-bot[bot]]

This issue is closed due to not being active. Please feel free to open it again (for the author) or create a new one and reference this (for others) if you have further questions.

[csliuyb]

same problem happend on our environment, still unsolved?

[MinorN]

same problem !!! echarts 4.9.3=>5.3.2 handdened import 'echarts/extension/bmap/bmap'

[houminz]

Meet the same problem on version v5.4.1. You can see the demo here https://codepen.io/librabyte/pen/dyjNPXW. Any suggestion would be appreciated, thanks for your efforts on this awesome project!

[Renzz926]

same problem happend on our environment, still unsolved?

[Renzz926]

same problem happend on our environment, still unsolved?

Has this problem been solved？

[tianmagongyue]

Has this problem been solved？

[declanchiu]

Has this problem been solved ? I also encountered this problem

[31702160109]

"echarts": "^5.4.2"

这个问题刚刚遇到了，解决办法将引入地图文件的方式改一下。 将 import "echarts/map/js/china.js" 改为 require("echarts/map/js/china.js") 生产环境就不会报错。

[CarsonLoi]

"echarts": "^5.4.2"

这个问题刚刚遇到了，解决办法将引入地图文件的方式改一下。 将 import "echarts/map/js/china.js" 改为 require("echarts/map/js/china.js") 生产环境就不会报错。

你好 請問 render 自定义svg map 出現Cannot read properties of undefined (reading 'regions') 有什麼建議嗎 如果需要代碼我可以發您. 感謝

[helgasoft]

@CarsonLoi, code is always needed when reporting a problem. @librabyte, your series data has no latitude/longitude coordinates.

The most common cause for error "Cannot read properties of undefined (reading 'regions')" is a missing map registration. See how registration is done in official example. Command registerMap requires geoJson or SVG format.

[CarsonLoi]

@helgasoft thanks for the reply mate. kindly find the source code and svg file below for your review. Additionally, I don’t think there’s a must to have latitude/longitude in svg file according to the official website example ( the beef one), please correct me if I am wrong and can you advise how to add latitude for a normal svg file

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

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 file

    <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>   

[helgasoft]

I don’t think there’s a must to have latitude/longitude in svg file

@CarsonLoi , correct - data parameters for SVG are name and value. I was referring to @librabyte's code for a geoJson map. Here is your code, working fine, Demo.