代码如下：
<template>
<div id="myMap"></div>
</template>
<script>
import echarts from 'echarts';
import '../../node_modules/echarts/map/js/world.js';
export default {
data(){
return{}
},
mounted(){
this.drawMap();
},
methods:{
drawMap(){
var myCharts = this.$echarts.init(document.getElementById('myMap'));
var geoCoordMap = { // 各城市的经纬度
'南宁': [108.479, 23.1152],
'广州': [113.5107, 23.2196],
'深圳': [114.085947, 22.547],
'重庆': [107.7539, 30.1904],
'芬兰': [24.909912, 60.169095],
'美国': [-100.696295, 33.679979],
'日本': [139.710164, 35.706962],
'韩国': [126.979208, 37.53875],
'瑞士': [7.445147, 46.956241],
'东南亚': [117.53244, 5.300343],
'澳大利亚': [135.193845, -25.304039],
'德国': [13.402393, 52.518569],
'英国': [-0.12797, 51.507702],
'加拿大': [-98.308968, 56.954681]
};
/*
记录下七点城市和终点城市的名称，以及权重，数组第一位为终点城市，数组第二位为起点城市，以及城市的权重，
就是图上圆圈的大小
* */
var SZData = [
[{name: '深圳'}, {name:'芬兰'}],
[{name: '深圳'}, {name:'德国'}],
[{name: '深圳'}, {name:'英国'}],
[{name: '深圳'}, {name:'韩国'}],
[{name: '深圳'}, {name:'日本'}],
[{name: '深圳'}, {name:'瑞士'}],
[{name: '深圳'}, {name:'加拿大'}]
];
var NNData = [
[{name:'南宁'},{name:'澳大利亚',value: 70}]
];
//飞机航线
var planePath ='path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
var allData = function(data){
const coordinate = [];
for(var i = 0; i < data.length; i++){
var dataItem = data[i];
var startCoord = geoCoordMap[dataItem[0].name]; //起始点坐标
var endCoord = geoCoordMap[dataItem[1].name]; //终点坐标
if(startCoord && endCoord){
coordinate.push([
{
coord: startCoord
},
{
coord: endCoord
}
]);
}
}
return coordinate;
};
var corlors =['#ffa022', '#46bee9'];
var series = [];
[['深圳',SZData],['南宁',NNData]].forEach(function(item, i) {
series.push(
{
// name: item[0],
type: 'lines',
zlevel: 1,
effect:{
show: true,//是否显示动画
period: 6,//显示动画时长
trailLength: 0.7,//轨迹长度
color: '#fff',
symbolSize: 3 //特效大小
},
lineStyle:{//正常情况下线条
normal:{
color: corlors[i],
width: 0,
curveness: 0.2 //线条曲线
}
},
data: allData(item[1]) //特效起始点位置
},
{//小飞机航线
// name: item[0].name + 'Top10',
type: 'lines',
zlevel: 2,
// symbol: ['none','arrow'],//设置箭头
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle:{
normal:{
color: '#46bee9',
width:1,
opacity: 0.6,
curveness: 0.2
}
},
data: allData(item[1])
},
{//散点
// name: item[0].name + 'Top10',
type: 'effectScatter',
coordinateSystem: 'geo', //采用地理坐标点
zlevel:3,
rippleEffect: {
brushType: 'stroke' //波纹效果
},
label:{
normal:{//默认的文本标签显示样式
show: true,
position: 'left',//标签位置
formatter: '{b}' //标签内容格式容器
}
},
// symbolSize: function(val){
// return val[2] /8;
// },
itemStyle:{
normal:{
color: corlors[i]
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[1].name, //起始点名称
value: geoCoordMap[dataItem[1].name],
//散点大小
symbolSize:dataItem[1].value /8
};
})
});
});
series.push({
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel:3,
rippleEffect: {
brushType: 'stroke'
},
label:{
normal:{
show: true,
position: 'left',
formatter: '{b}'
}
},
symbolSize(val){
return val[2] / 8;
},
itemStyle:{
normal:{
color: corlors[1]
}
},
data:[
{
name: '深圳',
value: [114.085947,22.547],
label: {
normal:{
position: 'top'
}
}
},
{
name: '南宁',
value: [108.479, 23.1152],
label: {
normal:{
position: 'bottom'
}
}
}
]
});
myCharts.setOption({
title:{
text: '攻略图',
left: 'center',
textStyle: {
color: '#46bee9'
}
},
textStyle:{
fontSize: 12
},
tooltip:{
trigger: 'item'
},
legend:{
orient: 'vertical',
top: 'bottom',
left: 'right',
data: ['深圳','南宁'],
textStyle:{
color: '#fff'
},
selectedMode: 'single'
},
geo: {
map: 'world',
roma: false,//禁止缩放平移
itemStyle:{ //每个区域样式
normal: {
areaColor: '#323c48'
},
emphasis:{
areaColor: '#2a333d'
}
},
label:{
emphasis:{
show: false
}
},
//选中的区域
regions:[
{
name: 'China',
selected: true,
itemStyle: { //高亮时的样式
emphasis:{
areaColor: '#7d7d7d'
}
},
label: { //高亮时不显示标签
emphasis:{
show:true
}
}
}
],
itemStyle:{
normal:{
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis:{
areaColor: '#2a33dd'
}
}
},
series: series
});
链接接口代码
}
}
}
/**
* tooltip:{
* trigger: 'axis',
* confine:true,
* textStyle:{
* align:'center'
* },
* axisPointer:{
* type:'cross',
* label:{
* backgroundColor: '#6a7985'
* }
* }
* }
*
* */
</script>
<style>
#myMap{
width: 100%;
height: 600px;
}
</style>
