我正在为我的highcharts-vue项目使用官方的vue包装。关于官方文档，我的main.js看起来像这样：
import HighchartsVue from 'highcharts-vue'
import Highcharts from "highcharts";
import HighchartsNoData from "highcharts/modules/no-data-to-display";
import mapInit from 'highcharts/modules/map'
HighchartsNoData(Highcharts);
mapInit(Highcharts);
Vue.use(HighchartsVue);
Mychart选项如下：
let zpSimChart = {
chart: {
map: 'countries/nl/nl-all-all',
backgroundColor: 'transparent'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
tooltip: {
backgroundColor: '#2A3F54',
formatter: function() {
return this.point.name;
},
style: {
color: '#FFFFFF',
fontSize: '10px'
}
},
title: {
text: ''
},
subtitle: {
text: ''
},
mapNavigation: {
enabled: true
},
series: [{
allowPointSelect: true,
data: [{"code":"nl-gr-gm0003","value":3,"name":"Test"},{"code":"nl-gr-gm0005","value":5,"name":"Test2"}],
name: 'Groei',
joinBy: ['hc-key', 'code'],
states: {
hover: {
color: '#7E91AA'
},
select: {
color: '#3B9FF3',
enabled:true
}
},
color: '#0B62A4',
dataLabels: {
enabled: false,
}
}],
colorAxis: {
dataClasses: [{
to: 9999,
color: '#0B62A4'
}]
},
exporting: {
enabled: false
}
};
export { zpSimChart }
我把大部分数据都留了出来（在这个问题中备用代码）。我在我的vue组件中导入了选项并将它们分配给zpSimChart，如下所示：
import { zpSimChart } from "./zpsimchart.js"
export default {
name: "zpsim",
data() {
return {
zpSimChart: zpSimChart,
alertVariant: "",
alertMsg: "",
showAlert: false,
showSpinner: false,
}
}
最后，图表标签如下所示：
<highcharts :constructor-type="'mapChart'" :options="zpSimChart"></highcharts>
现在，我可以看到图表被识别（即图表的zoombuttons可见）。
我认为我的问题是，我必须在某处为荷兰指定实际的javascript地图，但是当使用highcharts-vue包装时，官方文档没有说明如何做到这一点。我的参考是我的旧jQuery项目，其中地图确实有用，我曾经在这里用脚本标签包含实际地图：
<script src="https://code.highcharts.com/mapdata/countries/nl/nl-all-all.js"></script>
我已经尝试在我的index.html中包含脚本标记，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/static/icon/favicon.png">
<script src="https://code.highcharts.com/mapdata/countries/nl/nl-all-all.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
但没有运气。有关如何使这个工作的任何想法？
所以我发现我没有正确设置Highcharts.maps。我在main.js中添加了以下调整：
import { mapNetherlands } from "./assets/maps/netherlands"
Highcharts.maps["countries/nl/nl-all-all"] = mapNetherlands;
现在我的地图显示正确。