根据官方 Highcharts 文档，您必须手动包含地图脚本：

简而言之，地图的 GeoJSON 版本加载在页面的脚本标记中。然后将此 GeoJSON 对象注册到 Highcharts.maps 对象，并应用于图表设置中的 mapData 选项。

正如您在提到的小提琴中看到的那样，他们将地图包含在脚本标签中：

<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

由于上面的脚本包含，地图可用Highcharts.maps['custom/world'].

所以在 React module中，你必须手动添加所需的地图，就像你提到的演示一样。例如，如果要添加世界地图，则：

1. 从这里获取：https : //code.highcharts.com/mapdata/custom/world.js
2. 更换Highcharts.maps["custom/world"] =用module.exports =在上面的文件。
3. 在组件中加载地图 const map = require('./maps/world');
4. 然后你可以在配置中引用它 mapData: map

我知道您想跳过上述过程，但目前没有任何包含地图的 React module。

实际上，您可以采用一种骇人听闻的方法……在包含 react 脚本的 html 文件中，您可以包含 world.js 脚本标记，但首先您必须确保存在 Highcharts.maps 对象数组。以这种方式，您将在外部使用地图。

然而，这是一个不好的做法，因为您的 React 组件将依赖于该地图脚本。

好的做法是通过包管理器管理您的供应商module并引用组件中的module。这样，组件是自描述的

这些地图现在可以从 npm 获得。您可以将它们直接导入到您的组件中，并通过选项对象将其传递给 Highcharts。

npm i @highcharts/map-collection

import mapDataWorld from '@highcharts/map-collection/custom/world.geo.json'

series: [
  {
    mapData: mapDataWorld,
    name: "Asia",
    data: data
  }
]

我找到了另一种渲染地图的方法。

series: [{
          data: Highcharts.geojson(Highcharts.maps['https://code.highcharts.com/mapdata/cou ... /us-all.js']),
          name: 'USA',
          dataLabels: {
            enabled: true,
            format: '{point.properties.postal-code}'
          }
}]

来自 highcharts 论坛示例

基本上调用 js 源 url 来创建地图，但我更喜欢使用 Jordan Enev 的方式。

我看了一下，highcharts已经给了map集合，可以安装依赖@highcharts/map-collection例子

之后你可以试试

import React, { Component } from 'react';
import Highcharts from 'highcharts/highmaps';
import exporting from 'highcharts/modules/exporting';
...
...
exporting(Highcharts);
window.Highcharts = Highcharts;
require('@highcharts/map-collection/countries/id/id-all');
...
...
class Choroplethmap extends Component {
...
...
...
}
export default Choroplethmap;

这个问题已经在这个问题上提出

干杯，