Vue.js 在.vue文件中使用highmaps

我需要使用highcharts地图创建一个.vue页面，我想按照以下示例插入意大利地图：

我仍然不明白如何导入此脚本，因此对意大利地图的引用：

下面是一些关于我正在尝试的代码：

<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>

正如您在中所读到的：

有两种方法可以加载映射并将其与包装器一起使用。您可以安装包含所有地图的@highcharts/map collection`npm软件包，然后导入要在项目中使用的地图：

从“Highcharts”导入Highcharts 从“@highcharts/map collection/custom/world.geo.json”导入地图数据 Highcharts.maps['myMapName']=mapData 如果您不想安装包含所有地图的软件包，可以从Highmaps集合中选择必要的地图，并将地图数据复制到项目中的新文件中。然后，只需将其导入到您想要的任何地方，并以与上面相同的方式使用它

我准备了两种用法的演示，请参考

将适当的地图复制到单独的文件中 从npm软件包导入地图，如您所见：

有两种方法可以加载映射并将其与包装器一起使用。您可以安装包含所有地图的@highcharts/map collection`npm软件包，然后导入要在项目中使用的地图：

从“Highcharts”导入Highcharts 从“@highcharts/map collection/custom/world.geo.json”导入地图数据 Highcharts.maps['myMapName']=mapData 如果您不想安装包含所有地图的软件包，可以从Highmaps集合中选择必要的地图，并将地图数据复制到项目中的新文件中。然后，只需将其导入到您想要的任何地方，并以与上面相同的方式使用它

我准备了两种用法的演示，请参考

将适当的地图复制到单独的文件中

---

从npm包导入地图解决了安装@highcharts/map collection并创建组件地图图表的问题：

<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>

---

如果这能帮助某人解决安装@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>

---

如果这可以帮助某人

您好，谢谢您的回答，我正在尝试导入意大利地图，但在本例中：尝试导入意大利地图，它显示空白地图，我使用如下导入方式：从@highcharts/map collection/countries/it/it-all.geo.json导入地图数据；json文件的链接是我假设的，它不起作用，因为上述示例中存在的数据没有覆盖地图区域。只需将allAreas设置为true，即可看到所有区域。下面是一个例子：我解决了，我回答了我的问题，谢谢你的支持嗨，现在我有另一个问题。。。如果我将allAreas设置为true，则地图将越过容器…是否有方法将地图居中？您能否为我提供出现问题的现场示例？您好，谢谢您的回答，我正在尝试导入意大利地图，但在本示例中：尝试导入意大利地图时显示空白地图，我像这样使用导入：从@highcharts/map collection/countries/it/it-all.geo.json导入mapData；json文件的链接是我假设的，它不起作用，因为上述示例中存在的数据没有覆盖地图区域。只需将allAreas设置为true，即可看到所有区域。下面是一个例子：我解决了，我回答了我的问题，谢谢你的支持嗨，现在我有另一个问题。。。如果我将allAreas设置为true，则地图将越过容器…是否有方法将地图居中？您能否为我提供发生问题的实例？