HighCharts使用——Vue整合HighChartsMap

背景

• 系统需要展示一张世界地图

关键条件

• 下载highchartsMap依赖包

npm i @highcharts/map-collection -S

• 导入地图依赖

/**
 * 导入地图依赖包
 */
import Highcharts from 'highcharts'; // 必须导入
import HighchartsMore from 'highcharts/highcharts-more'; // 上钻下钻事件需要
import HighchartsDrilldown from 'highcharts/modules/drilldown'; // 上钻下钻事件需要
import Highcharts3D from 'highcharts/highcharts-3d'; // 3D地图需要
import HighchartsMap from 'highcharts/modules/map'; // 必须导入


/**
 * 世界地图数据
 */
import worldMap from '@highcharts/map-collection/custom/world-palestine-highres.geo.json';
//世界地图中，中国大陆和台湾具有两个标识，此处是将地图数据加工两处合二为一，成为一个中国


let chinaModel = worldMap.features.find((i) => i.id === 'CN');
let cn = chinaModel.geometry.coordinates;
let delIndex;
worldMap.features.forEach((f, i) => {
    if (f.id === 'TW') {
        let TwCoordinates = f.geometry.coordinates;
        cn.splice(1, 0, TwCoordinates);
        delIndex = i;
    }
});
chinaModel.geometry.coordinates = cn;
delete worldMap.features[delIndex];















/**
 * 关联图表
 */
HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
HighchartsMap(Highcharts);

• 建立地图数据

data() {
        return {
            //地图数据
            mapOptions: {
                chart: {
                    type: 'map',
                    events: {
　　　　　　　　　　　　　　 // 上钻回调事件
                        drillup: function (e) {
                            console.log(e.seriesOptions);
                        },
　　　　　　　　　　　　　　 // 下钻回调事件
                        drilldown: function (e) {
                            console.log(e.seriesOptions);
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: ''
                },
                mapNavigation: {
                    enabled: true,
                    buttonOptions: {
                        alignTo: 'spacingBox'
                    }
                },
                colorAxis: {
                    min: 0,
                    stops: [[0, '#EFEFFF']]
                },


                xAxis: {},
                yAxis: {
                    title: {
                        text: ''
                    }
                },
                plotOptions: {
                    spline: {
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 3
                            }
                        },
                        marker: {
                            enabled: false
                        }
                    }
                },
                legend: {
                    enabled: false,
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
　　　　　　　　　　//格式化展示数据
                tooltip: {
                     
                },
                series: [
                    {
                        name: '国家',
                        states: {
                            hover: {
                                color: '#BADA55'
                            }
                        },
                        dataLabels: {
                            enabled: false,
                            format: '{point.name}'
                        },
                        allAreas: true,
                        mapData: worldMap,
                        // 此处填写我们要渲染的数据，如果不填写，只有世界地图，没有悬浮颜色变化信息
                        data: []
                    }
                ]
            }
        };
    },

• 初始化地图数据

initData() {
        const data = [];
        //以世界地图数据模拟地图显示数据
        worldMap.features.forEach((city, index) => {
            let key = city.properties['hc-key'];


            var obj = {
                'hc-key': key,
                value: Math.floor(Math.random() * 100 + 1), // 生成 1 ~ 100 随机值
                color: '#7FFFD4',
                //实现地图下钻必须属性
                drilldown: key,
                //自定义数据，可在tooltip获取格式化展示
                self1: '自定义',
                self2: '自定义'
            };
            
            data.push(obj);
        });
        debugger;
        this.mapOptions.series[0].data = data;
    }

 完整Vue代码(可显示地图)

• Vue详细代码请点击链接：下载 EarthMap.vue 。

显示地图