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.geo.json';
/**  * 关联图表  */ 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代码(可显示地图)

显示地图