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],
};

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

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

echarts实现航线图，航运图相关推荐

hdc mfc 画扇形图_使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图简单举例说明下echarts如何绘制条形图和扇形图代码示例 echarts绘制条形图和扇形图 var mychart1=echarts.init(documen ...
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决参考文章: (1)ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 (2)https://ww ...
如何利用echarts图表获取条状图点击名称和值
如何利用echarts图表获取条状图点击名称和值听语音 | 浏览:1505 | 更新:2017-06-13 10:20 | 标签:软件 1 2 3 4 5 6 7 分步阅读 echarts图表插件工 ...
Echarts数据可视化series-radar雷达图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-line线图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-graph关系图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置 1.认识使用可以参考之前文章,会使用直接跳过1 引入官网的南丁格尔玫瑰图效果如下: 使用函数配置分为三个部分:初始化=> 设置 ...
Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...
【echarts记录 -- 3d 饼状图实现】
echarts记录 -- 3d 饼状图实现实现效果效果1 效果2 代码实现效果效果1 效果2 代码 /************************* pie3D 尝试更新时间: 2020. ...
echarts 球形水波_ECharts 水球图教程
ECharts 水球图教程羡辙 2017-02-21 水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们 ...

echarts实现航线图，航运图

echarts实现航运图，航运图

echarts实现航线图，航运图相关推荐

最新文章

热门文章