Я столкнулся с проблемой при реализации Highmaps.
В моем vue проекте с Webpack я следовал каждому шагу, объясненному https://github.com/highcharts/highcharts-vue для использования Highmaps.
Вот мой главный. js файл
//highchart
import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'
import WorldMap from '@highcharts/map-collection/custom/world.geo.json'
import USMap from '@highcharts/map-collection/countries/us/us-all.geo.json'
import mapInit from 'highcharts/modules/map.js'
import DrillDown from 'highcharts/modules/drilldown.js'
mapInit(Highcharts);
DrillDown(Highcharts);
Highcharts.maps['world'] = WorldMap;
Highcharts.maps['us'] = USMap;
И вот мой vue файл
<template>
<div>
<mymap :mapOptions="mapOptions.options"></mymap>
</div>
</template>
<script>
export default{
data(){
return {
mapOptions: {
options: {
chart: {
map: 'us',
events: {
drilldown: function(e){
var chart = this;
this.addSeriesAsDrilldown(e.point, {
data: 'world',
dataLabels: {
enabled: true,
format: '{point.name}'
}
})
},
drillup: function(){
}
}
},
series: [{
data: data,
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled:true,
color: '#FFFFFF',
format: '{point.name}'
}
}],
}
}
}
},
}
</script>
Поскольку на диаграмме есть «диаграмма»: вариант, он отображает карту США в первую очередь. Затем, когда я нажимаю на любое состояние (только для теста), он переключает карту США на карту мира. Это делает карту мира. Тем не менее, это также делает карту США тоже. То есть он отображает обе карты. Как я могу это исправить ??