记录利用Highcharts实现地图气泡图

实现地图渲染见另外一篇：https://www.jianshu.com/p/78f9d1ee1790。

这里只记录实现气泡功能。项目采用react 选用的是Highcharts 和 highcharts-react-official库。实现气泡功能与highcharts-react-official没有关系，主要还是Highcharts。highcharts-react-official只是封装了一层，让Highcharts能用react组件的形式渲染。

在项目中，按照官网设置series如下：

series: [{

                name: 'Basemap',

                mapData: map,

                borderColor: '#606060',

                nullColor: 'rgba(200, 200, 200, 0.2)',

                showInLegend: false

            }, {

                type: 'mapbubble',

                dataLabels: {

                enabled: true,

                format: '{point.capital}'

                },

                name: 'Cities',

                data: data,

                maxSize: '12%',

                color: H.getOptions().colors[0]

            }]

但设置后页面如下：没有显示气泡。

进一步对比，发现在html中还引入一个js，

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>

在项目的index.html引入后，地图气泡图渲染完成。