在vue中使用highmaps并引入proj4js

应用场景：

最近公司有个需求，需要在中国地图上显示各省，市/直辖市，区/县等显示用户使用量，本来有两种实现方式，但设计图是采用气泡图形式展现的，所以就研究了一下highcharts的气泡图

demo效果图如下：

问题描述：

在vue项目中使用气泡图碰到了两个问题：

1、使用气泡图需要用到proj4.js,但是在vue中引入时却报错

Highcharts error #21: www.highcharts.com/errors/21

error21的大致意思是：在Highmaps中使用纬度/经度功能需要 加载Proj4js库。

所以说引入失败了

2、Uncaught (in promise) ReferenceError: Highcharts is not defined

这个错误是同时使用多彩颜色轴和气泡图时产生的，（本来使用多彩颜色轴是可以直接区分用户分布的）

多彩颜色轴demo效果图：

问题分析：

既然proj4.js库导入失败，且Highcharts is not defined，那么就去highmaps里面找找到底是哪里用到了；

分析highmaps.js源码，发现只有四个地方用到了proj4, 而且proj4这个方法挂载在H这个对象上；

追本溯源，发现c.win代表的就是window对象，那么这就好办了！

*同时也发现Highcharts这个对象也是挂载在window对象上

解决办法：

在引入highmaps.js前，引入proj4.js，并且挂载到window对象上，

import proj4 from '@/common/js/highcharts/proj4.js';
window['proj4'] = proj4;
import Highmaps from '@/common/js/highcharts/highmaps.js';

如果要同时使用多彩颜色轴和气泡图，则：

import proj4 from '@/common/js/highcharts/proj4.js';
import Highcharts from '@/common/js/highcharts/Highcharts.js';
window['proj4'] = proj4;
window['Highcharts'] = Highcharts ;
import Highmaps from '@/common/js/highcharts/highmaps.js';

以上引用路径以你项目本地路径为准！

最终效果图：

最后发现多彩颜色轴的颜色设置会覆盖掉气泡图的颜色，暂时还没找到解决办法~~~~