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 。
显示地图
分类:
前端开发
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」