项目用到了Highcharts，需要做一个地图图表。查阅Highcharts相关网站，发现都是用script插入的方式。而项目目前是react模块化开发 并且使用了highcharts-react-official。
踩坑：将官网的相关参数集成到项目里，但地图始终无法出来。
官网第1点：加载js文件，将china.js放在index.html加载，china.js会报Highcharts未定义。原因：Highcharts是import进来的，在index.html加载是会未定义。
那怎么办呢？这个js貌似应该是要引入的。但是你看第2点，加载json文件，浏览器打开图中的地址：https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?。对比图中第1点 加载js文件，会发现里面的内容一样。既然一样，你加载这个json文件不就好了。（并且仔细阅读上面的语句，官网的意思也是这样，我们提供的地图数据集一般有两种格式，JS 和 JSON 文件，两者内容基本相同，只是加载方式不同，下面以加载中国地图（china.js）数据来说明：）
那么图中的第1点和第2点就相当于一点。
那咱们第一步：加载地图的json文件，之后将数据存到state里。方法如下，在组件的componentDidMount中用axios加载这个js。因为请求带了多余字符串 去除后将返回的数据存在state里。
async getMapData() {
var url = "https://data.jianshukeji.com/jsonp?filename=geochina/china.json";
try {
const response = await axios.get(url, {
params: {},
dataType:'json'
});
if (response.status === 200) {
let res = response.data.slice(2,-1);
this.setState({
mapData: JSON.parse(res),
});
}
} catch (error) {
console.error(error);
}
}
第二步看图中第三点，项目里不是通过这种方式构建的，因此跳过。
var map= Highcharts.mapChart('container', {// ... 图表配置});
第三步，最关键的是将第一步加载的数据给series.mapData赋值，其他设置项见官网。官方第4点如下图，
第四步：由于用的是highcharts-react-official，参与highcharts-react-official地图用法，需要设置constructorType = { 'mapChart' }。
<HighchartsReact
highcharts={Highcharts}
constructorType = { 'mapChart' }
options={chartOptions}
ref={ bodyBox }
callback={ this.afterChartCreated.bind(this) }
/>
检查一遍 都设置完了，但是地图就是不出来。
第五步：这里最关键的一个没有设置 官网里由于是script引入的例子，没有举例，我也没有找到如何设置。经过搜索 从这里得到启发：https://stackoverflow.com/questions/54920928/integrate-highcharts-maps-with-react-component ，修改了Highcharts的引入，就可以啦。
import Highcharts from 'highcharts';修改为 import Highcharts from "highcharts/highmaps";
出坑。
