vue中使用highcharts中的highmaps绘制地图使,在使用经纬度功能时可能会出现问题,例如Highcharts error #21: www.highcharts.com/errors/21
官方表示,是没有引入proj4这个库导致的,官方只介绍了如何使用<script>标签来引入。接下来介绍下如何在vue中引入。
首先安装highcharts,这个可以直接看highcharts官网,这里附上链接https://www.highcharts.com.cn/docs/install-from-npm
之后要使用highcharts的经纬度功能,还得安装proj4
npm install proj4
之后具体引入代码如下
import Highcharts from 'highcharts/highstock'
import proj4 from 'proj4'
import HighchartsMore from 'highcharts/highcharts-more'
import Highmaps from 'highcharts/modules/map'
import china from '../../public/js/china.js'
HighchartsMore(Highcharts)
Highmaps(Highcharts)
这里的china.js是在官网上下的地图数据,链接:https://img.hcharts.cn/mapdata/ 。
当然下载后还得稍作更改,https://blog.csdn.net/weixin_38514634/article/details/86650670 在这篇文章有说明。
之后为了使用proj4,在官网上找到了一个API:
具体使用方法
Highcharts.mapChart('highchartsmap', {
//其余属性
chart: {
//其余属性
proj4: proj4,
//其余属性
},
//其余属性
})
这样,就可以在vue中使用highmaps中的经纬度功能了。