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的代码内容就可显示出效果了。剩下的就是整合到项目里了。

整合到项目的步骤就不写了  这个比较简单，好了  快拿走吧   好用记得点赞哈！！！