项目用到了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";

出坑。