Question

我需要创建一个带有highcharts地图的.vue页面，我想在此示例后插入意大利语地图：

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

您可以在this documentation中阅读

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

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>

如果这可以帮助某人

在.vue文件中使用高图

2 个答案: