echarts实现航运图，航运图
需求：地图上有一些地点或者港口，如果港口间有航线，则点击具体的点会显示出具体的航线。实现图如下：
点击具体的点后呈现：
具体的echarts代码如下：
var data = [
{name: \'上海\', value: 50},
{name: \'厦门\', value: 50},
{name: \'深圳\', value: 60},
{name: \'三亚\', value: 54},
{name: \'长崎\', value: 60},
{name: \'新加坡\', value: 60},
{name: \'马尼拉\', value: 60},
{name: \'雅加达\', value: 60},
];
var geoCoordMap = {
\'上海\':[121.48,31.22],
\'厦门\':[118.1,24.46],
\'深圳\':[114.07,22.62],
\'珠海\':[113.52,22.3],
\'三亚\':[109.511909,18.252847],
\'长崎\':[130,30],
\'新加坡\':[103.51,1.18],
\'马尼拉\':[120.984219,14.599512],
\'雅加达\':[106.845172,-6.211544],
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
title: {
text: \'航运路线图\',
left: \'center\'
},
tooltip : {
trigger: \'item\'
},
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [{
\'featureType\': \'water\',
\'elementType\': \'all\',
\'stylers\': {
\'color\': \'#d1d1d1\'
}
}, {
\'featureType\': \'land\',
\'elementType\': \'all\',
\'stylers\': {
\'color\': \'#f3f3f3\'
}
}, {
\'featureType\': \'railway\',
\'elementType\': \'all\',
\'stylers\': {
\'visibility\': \'off\'
}
}, {
\'featureType\': \'highway\',
\'elementType\': \'all\',
\'stylers\': {
\'color\': \'#fdfdfd\'
}
}, {
\'featureType\': \'highway\',
\'elementType\': \'labels\',
\'stylers\': {
\'visibility\': \'off\'
}
}, {
\'featureType\': \'arterial\',
\'elementType\': \'geometry\',
\'stylers\': {
\'color\': \'#fefefe\'
}
}, {
\'featureType\': \'arterial\',
\'elementType\': \'geometry.fill\',
\'stylers\': {
\'color\': \'#fefefe\'
}
}, {
\'featureType\': \'poi\',
\'elementType\': \'all\',
\'stylers\': {
\'visibility\': \'off\'
}
}, {
\'featureType\': \'green\',
\'elementType\': \'all\',
\'stylers\': {
\'visibility\': \'off\'
}
}, {
\'featureType\': \'subway\',
\'elementType\': \'all\',
\'stylers\': {
\'visibility\': \'off\'
}
}, {
\'featureType\': \'manmade\',
\'elementType\': \'all\',
\'stylers\': {
\'color\': \'#d1d1d1\'
}
}, {
\'featureType\': \'local\',
\'elementType\': \'all\',
\'stylers\': {
\'color\': \'#d1d1d1\'
}
}, {
\'featureType\': \'arterial\',
\'elementType\': \'labels\',
\'stylers\': {
\'visibility\': \'off\'
}
}, {
\'featureType\': \'boundary\',
\'elementType\': \'all\',
\'stylers\': {
\'color\': \'#fefefe\'
}
}, {
\'featureType\': \'building\',
\'elementType\': \'all\',
\'stylers\': {
\'color\': \'#d1d1d1\'
}
}, {
\'featureType\': \'label\',
\'elementType\': \'labels.text.fill\',
\'stylers\': {
\'color\': \'#999999\'
}
}]
}
},
series : [
{
name: \'航运起点\',
type: \'graph\',
coordinateSystem: \'bmap\',
layout: \'none\',
data: convertData(data),
links: [{
source: \'深圳\',
target: \'长崎\'
}, {
source: \'深圳\',
target: \'新加坡\'
},{
source: \'深圳\',
target: \'马尼拉\'
}, {
source: \'深圳\',
target: \'雅加达\'
},{
source: \'三亚\',
target: \'雅加达\'
},
{
source: \'上海\',
target: \'长崎\'
},
{
source: \'上海\',
target: \'马尼拉\'
},{
source: \'上海\',
target: \'新加坡\'
},{
source: \'上海\',
target: \'深圳\'
},{
source: \'上海\',
target: \'三亚\'
},{
source: \'厦门\',
target: \'马尼拉\',
},{
source: \'马尼拉\',
target: \'厦门\'
}
],
roam: true,
focusNodeAdjacency: true,
itemStyle: {
normal: {
borderColor: \'#fff\',
borderWidth: 1,
shadowBlur: 10,
shadowColor: \'rgba(0, 0, 0, 0.3)\'
}
},
hoverAnimation: true,
label: {
normal: {
formatter: \'{b}\',
position: \'right\',
show: true
}
},
lineStyle: {
color: \'source\',
curveness: 0.3
},
emphasis: {
lineStyle: {
width: 2
}
}
}
]
};
直接复制代码替换https://www.echartsjs.com/examples/zh/editor.html?c=effectScatter-bmap的代码内容就可显示出效果了。剩下的就是整合到项目里了。
整合到项目的步骤就不写了 这个比较简单，好了 快拿走吧 好用记得点赞哈！！！