использовать highmaps в файле .vue

Question

Мне нужно создать страницу .vue с картой Highcharts, я хотел бы вставить итальянскую карту в следующем примере:

https://jsfiddle.net/gh/get/library/pure/highslide-software/highcharts.com/tree/master/samples/mapdata/countries/it/it-all Я до сих пор не понимаю, как импортировать этот скрипт и поэтому ссылка на итальянскую карту:

вот код о том, что я пытаюсь:

<template>
    <div id="Cdl">
        <div class="main-wrapper">
            <Highmaps :options="options" />
        </div>
    </div>
</template>

<script>

    import HighCharts from 'vue-highcharts';
    import loadMap from 'highcharts/modules/map.js';
    import { genComponent } from 'vue-highcharts';
    export default {
        components: {
            Highmaps: genComponent('Highmaps', HighCharts),
        },
        data() {
            return {
                options:{
                    chart: {
                        map: 'countries/it/it-all'
                    },
                    title: {
                        text: 'Highmaps basic demo'
                    },
                    subtitle: {
                        text: 'Italy'
                    },
                    mapNavigation: {
                        enabled: true,
                        buttonOptions: {
                            verticalAlign: 'bottom'
                        }
                    },
                    colorAxis: {
                        min: 0
                    },
                    series: [{
                        data: [
                            ['it-na', 0],
                            ['it-tp', 1],
                            ['it-pa', 2],
                            ['it-me', 3],
                            ['it-ag', 4],
                            ['it-nu', 5],
                            ['it-og', 6],
                            ['it-ms', 7],
                            ['it-mt', 8],
                            ['it-bn', 9],
                            ['it-cl', 10],
                            ['it-an', 11],
                            ['it-pg', 12],
                            ['it-ci', 13],
                            ['it-ss', 14],
                            ['it-ot', 15],
                            ['it-gr', 16],
                            ['it-li', 17],
                            ['it-ar', 18],

                        ],
                        name: 'Random data',
                        states: {
                            hover: {
                                color: '#BADA55'
                            }
                        },
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }]
                },

            }

        },
        created() {

            loadMap(HighCharts)

        },
    };
</script>

Answer 1

Как вы можете прочитать в этой документации :

Существует два способа загрузки карт и использования их с оберткой. Вы можете установить пакет npm @ highcharts / map-collection` со всеми включенными картами, а затем импортировать те карты, которые вы хотели бы использовать в своем проекте:

import Highcharts from 'highcharts'
import mapData from '@highcharts/map-collection/custom/world.geo.json'

Highcharts.maps['myMapName'] = mapData

Если вы не хотите устанавливать пакет со всеми картами, есть возможность выбрать необходимую карту из коллекции Highmaps и скопировать данные карты в новый файл в вашем проекте. Затем просто импортируйте его туда, куда хотите, и используйте его так же, как описано выше.

Я подготовил демонстрации с обоими способами, поэтому, пожалуйста, ознакомьтесь с ними.

https://codesandbox.io/s/highcharts-vue-demo-mqxde (с копированием соответствующей карты в отдельный файл) https://codesandbox.io/s/highcharts-vue-demo-rdp7f (импорт карты из пакета npm)

Answer 2

решено установить @ highcharts / map-collection и создать компонент Mapchart:

<template>
    <highcharts :constructor-type="'mapChart'" :options="options" class="map"> 
   </highcharts>
</template>

<script>
    export default {
        props:{
            options:Object
        }
    };
</script>
<style scoped>
    .map {
        min-height: 800px;
    }
</style>

, затем на странице с картой у меня есть это:

<template>
    <div id="app">
        <mapChart :options="mapOptions"></mapChart>
    </div>
</template>

<script>

    import Vue from "vue";

    import HighchartsVue from "highcharts-vue";
    import Highcharts from "highcharts";
    import mapInit from "highcharts/modules/map";
    import mapChart from "../../../components/mapChart";
    import mapData from "@highcharts/map-collection/countries/it/it-all.geo";

    mapInit(Highcharts);
    Highcharts.maps["myMapName"] = mapData;

    Vue.use(HighchartsVue)

    export default {
        name: "app",
        components: {
            mapChart
        }, data() {
            return {
                mapOptions: {...}
                };
            }
        };
    </script>

, если это может помочькто-то