- 下载highcharts
- highcharts组件
<template>
<div>
<div ref="chartContainer" id="container" style="height: 800px; width:100%"></div>
</div>
</template>
<script>
import Highcharts from 'highcharts';
import mapModule from 'highcharts/modules/map';
mapModule(Highcharts);
export default {
props: {
mapData: Object, // 接收地图数据作为属性
data: Array, // 接收城市数据作为属性
connectData: Array,//哪两个城市间需要连线
},
computed: {
lineData(){
let resData = []
this.connectData.forEach(item => {
console.log('start:', item.start.id);
console.log('end:', item.end.id);
if(item && item.start && item.start.id && item.end && item.end.id){
let obj = {
id: item.start.name + '-' + item.end.name,
path: this.pointsToPath(this.chart.get(item.start.id), this.chart.get(item.end.id))
}
console.log('obj:', obj);
console.log('------------------------------')
resData.push(obj)
}
})
return resData
}
},
watch: {
data: {
handler(){
this.updateChart()
},
deep: true,
},
},
mounted() {
this.initializeChart();
},
data(){
return{
chart: null,
}
},
methods: {
initializeChart() {
this.chart = Highcharts.mapChart(this.$refs.chartContainer, {
// Highcharts 地图的配置
title: {
text: '地图标题 ',
align: 'center'
},
legend: {
enabled: false
},
accessibility: {
enabled: false,
point: {
valueDescriptionFormat: '{xDescription}.'
}
},
mapNavigation: {
enabled: true
},
tooltip: {
shared: false, // 关闭共享 tooltip
formatter: function () {
let tooltipText = `<b>${this.point.region}</b><br>`;
// 在整个系列的数据中查找当前城市的数据点
const cityData = this.series.chart.options.series[1].data.find(city => city.region === this.point.region);
//hover城市点展示的内容
if (cityData && cityData.cloud_list) {
cityData.cloud_list.forEach(item => {
tooltipText += `${item.account}: ${item.vm_count} 台<br>`;
});
}
let returnText = this.point.region ? tooltipText : this.point.id
return returnText;
},
},
plotOptions: {
series: {//城市点的样式
cursor: 'pointer',
point: {
events: {
//点击城市点后的事件（本文是调用接口显示图表）
click: (e)=> {
let city = e.point.region
if(city){
this.$emit('displayTable', e.point.region);
}else{
this.$message.error('请点击城市点获取详细信息！')
}
}
}
},
}
},
series: [{
// Use the gb-all map with no data as a basemap
mapData: this.mapData, // 使用传入的地图数据,
name: 'Great Britain',
borderColor: '#c9c9c9',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: false
}, {
type: 'mappoint',
name: 'Cities',
data: this.data,
marker: {
radius: 3, // 设置点的大小
fillColor: '#fff', // 填充颜色
lineColor: Highcharts.getOptions().colors[1], // 点的边框颜色
lineWidth: 3 // 点的边框宽度
},
dataLabels: {
enabled: true, // 启用数据标签
format: '{point.region}', // 显示城市名称
style: {
fontSize: '11px',
color: '#000', // 数据标签文本颜色
fontWeight: 'bold', // 数据标签文本粗细
textOutline: '3px contrast' // 数据标签文本描边
},
verticalAlign: 'bottom', // 数据标签垂直对齐方式
align: 'center', // 数据标签水平对齐方式
y: -3,
}
}],
credits: {enabled: false},// remove high chart logo hyper-link
});
this.drawLine()
},
//自带的方法，描点
pointsToPath(fromPoint, toPoint, invertArc) {
if(fromPoint && toPoint){
const
from = this.chart.mapView.lonLatToProjectedUnits(fromPoint),
to = this.chart.mapView.lonLatToProjectedUnits(toPoint),
curve = 0.05,
arcPointX = (from.x + to.x) / (invertArc ? 2 + curve : 2 - curve),
arcPointY = (from.y + to.y) / (invertArc ? 2 + curve : 2 - curve);
return [
['M', from.x, from.y],
['Q', arcPointX, arcPointY, to.x, to.y]
];
}else{
return []
}
},
//自带方法，连线
drawLine(){
console.log('drawLLLLLLLLLLLine;')
this.chart.addSeries({
type: 'mapline',
lineWidth: 2,
color: 'red',
// color: Highcharts.getOptions().colors[3],
// data: [{
// id: 'beijing - singapore',
// path: this.pointsToPath(this.chart.get('beijing'), this.chart.get('singapore'))
// },{
// id: 'beijing - seoul',
// path: this.pointsToPath(this.chart.get('beijing'), this.chart.get('seoul'))
// }, ],
data: this.lineData,
}, true, false);
},
updateChart(){
console.log('sousuo---update-chart!');
console.log('update-data:', this.data);
console.log('connetction-data:', this.connectData);
console.log('update-lineData:', this.lineData);
console.log('this.chart:', this.chart);
var series = this.chart.series;
while(series.length > 2) {
series[2].remove(false);
}
// const chart = this.chart;
this.chart.series[1].setData(this.data);
// this.initializeChart()
this.chart.redraw(); // 重新绘制图表以反映更改
this.drawLine();
},
}
};
</script>
- 主页面调用
<template>
<highcharts-map
ref="highchartsMap"
v-if="mapData && cityData"
:map-data="mapData"
:data="cityData"
:connect-data="connectionData"
@displayTable="displayTable">
</highcharts-map>
</template>
<script>
import HighchartsMap from '@/views/Topography/HighchartsMap.vue'
export default {
components: {
HighchartsMap,
},
async mounted() {
// 获取地图数据和城市数据
try {
const mapDataResponse = await fetch(
'https://code.highcharts.com/mapdata/custom/world.topo.json'
).then(response => response.json());
let postData = {
'cloud_name': this.form.industry,
'account': this.form.accountName,
}
const cityDataResponse = await getRegionChartList(postData);
const cityConnectionRes = await getInterConnectionRegion(postData);
this.mapData = mapDataResponse;
this.cityData = this.handleCityData(cityDataResponse);
this.connectionData = this.handleConnectionData(cityConnectionRes);
console.log('connectionData:', this.connectionData);
} catch (error) {
console.error('Error fetching data:', error);
}
},
data(){
return{
mapData: null, // 接收地图数据
cityData: [], // 接收城市数据
connectionData: [],
}
}
附带几个highcharts常用地址
https://www.hcharts.cn/docs/latlon
https://blog.csdn.net/qq_29918313/article/details/118361046
https://www.highcharts.com/docs/index
https://api.highcharts.com/highmaps/lang
