背景
- 系统需要展示一张世界地图
关键条件
- 下载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代码(可显示地图)
<!-- 世界地图 -->
<template>
<div>
<div></div>
<div>
<highcharts
:constructor-type="'mapChart'"
class="chart-box"
:options="mapOptions"
ref="chart"
:style="this.chartsStyle"
></highcharts>
</div>
</div>
</template>
<script>
/**
* 导入地图依赖包
*/
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);
export default {
name: 'earth-map',
props: {},
data() {
return {
// showDate: dateUtil.monthToString(new Date()),
chartsStyle: {}, //算力折线图样式
//地图数据
mapOptions: {
chart: {
type: 'map',
events: {
drillup: function (e) {
// 上钻回调事件
console.log(e.seriesOptions);
},
drilldown: function (e) {
debugger;
if (!e.seriesOptions) {
var chart = this;
(drilldowns = {
Animals: {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
Fruits: {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
Cars: {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
}),
(series = drilldowns[e.point.name]);
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
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: {
// shared: true,
// useHTML: true,
// headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>',
// pointFormatter: function () {
// debugger;
// let hcKey = this.hc - key;
// let name = this.series.name;
// let color = this.series.color;
// debugger;
// // if (hpValue < 1000) {
// // let value =
// // '<tr><td style="color: ' +
// // color +
// // '">' +
// // name +
// // ' </td>' +
// // '<td style="text-align: right"><b>' +
// // hpValue.toFixed(2) +
// // ' GH/s' +
// // '</b></td></tr>';
// // return value;
// // } else if (hpValue <= 1000000) {
// // let value =
// // '<tr><td style="color: ' +
// // color +
// // '">' +
// // name +
// // ' </td>' +
// // '<td style="text-align: right"><b>' +
// // (hpValue / 1000).toFixed(2) +
// // ' TH/s' +
// // '</b></td></tr>';
// // return value;
// // } else if (hpValue >= 1000000) {
// // let value =
// // '<tr><td style="color: ' +
// // color +
// // '">' +
// // name +
// // ' </td>' +
// // '<td style="text-align: right"><b>' +
// // (hpValue / 1000000).toFixed(2) +
// // ' PH/s' +
// // '</b></td></tr>';
// // return value;
// // }
// },
// footerFormat: '</table>'
// },
series: [
{
name: '国家',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: false,
format: '{point.name}'
},
allAreas: true,
mapData: worldMap,
// 此处填写我们要渲染的数据，如果不填写，只有世界地图，没有悬浮颜色变化信息
data: []
}
]
}
};
},
created() {
//获取地图数据
this.initData();
},
methods: {
initData() {
const data = [];
worldMap.features.forEach((city, index) => {
let key = city.properties['hc-key'];
if (key === 'cn') {
var obj = {
'hc-key': key,
value: Math.floor(Math.random() * 100 + 1), // 生成 1 ~ 100 随机值
color: '#FFEBCD',
//实现地图下钻必须属性
// drilldown: key,
//自定义数据，可在tooltip获取格式化展示
self1: '自定义',
self2: '自定义'
};
} else if (key === 'us') {
var obj = {
'hc-key': key,
value: Math.floor(Math.random() * 100 + 1), // 生成 1 ~ 100 随机值
color: '#7FFFD4',
//实现地图下钻必须属性
// drilldown: key,
//自定义数据，可在tooltip获取格式化展示
self1: '自定义',
self2: '自定义'
};
} else {
var obj = {
'hc-key': key,
value: Math.floor(Math.random() * 100 + 1) // 生成 1 ~ 100 随机值
};
}
data.push(obj);
});
debugger;
this.mapOptions.series[0].data = data;
}
},
mounted() {},
watch: {
chartsViewHeight: {
handler(val) {
this.chartsStyle = { height: val + 'px' };
},
immediate: true,
deep: true
}
}
};
</script>
<style scoped>
#hashpower-container {
text-align: center;
}
.chart-box {
padding-top: 20px;
}
</style>
显示地图
