Echarts 在地图上绘制流向图
首先需要获取地图JSON数据包,点此下载(Echarts官方地图数据,包含世界、中国,及国内各省数据)。
实现效果如图:
代码如下:
<!--
此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=map-HK
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script type="text/javascript">
$.getJSON('./china.json', function(china)
{
echarts.registerMap('china', china);
var myChart = echarts.init(document.getElementById('container'));
myChart.showLoading(
{
text: '加载中...',
color: '#c23531',
fontSize: '28px',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.2)',
zlevel: 0,
});
var scale = 1;
var geoCoordMap = {};
echarts.util.each(china.features, function(dataItem, idx)
{
geoCoordMap[dataItem.properties.name] = dataItem.properties.cp;
});
var mapData =
[
{from: '青海', to: '青海', value: 90, color: '#1DE9B6'},
{from: '青海', to: '安徽', value: 80, color: '#ACC5E9'},
{from: '青海', to: '甘肃', value: 70, color: '#FFDB5C'},
{from: '青海', to: '宁夏', value: 60, color: '#3D552A'},
{from: '青海', to: '山西', value: 50, color: '#B4B9FF'},
{from: '青海', to: '陕西', value: 40, color: '#A6C84C'},
{from: '青海', to: '广东', value: 30, color: '#FFA022'},
{from: '青海', to: '重庆', value: 20, color: '#46BEE9'},
{from: '青海', to: '西藏', value: 10, color: '#FAC55C'}
];
var convertLineData = function(data)
{
var res = [];
for(var i = 0; i < data.length; i++)
{
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem.from];
var toCoord = geoCoordMap[dataItem.to];
if(fromCoord && toCoord)
{
res.push(
{
fromName: dataItem.from,
toName: dataItem.to,
coords: [fromCoord, toCoord],
value: dataItem.value,
color: dataItem.color
});
}
}
return res;
};
var convertPointData = function(data)
{
var res = [];
for(var i = 0; i < data.length; i++)
{
var dataItem = data[i];
var toCoord = geoCoordMap[dataItem.to];
if(toCoord)
{
res.push(
{
name: dataItem.to,
value: toCoord,
count: dataItem.value,
color: dataItem.color
});
}
}
return res;
}
var option =
{
tooltip:
{
trigger: 'item',
axisPointer:
{
type: 'shadow'
},
textStyle:
{
fontSize: 12 * scale,
},
formatter: function(params)
{
let returnStr = '';
if(params.componentSubType == 'effectScatter')
{
returnStr += params.marker;
returnStr += params.name + ':' + params.data.count;
}
else if(params.componentSubType == 'lines')
{
returnStr += params.marker;
returnStr += params.data.fromName + ' -> ' + params.data.toName;
returnStr += ':' + params.data.value;
}
return returnStr;
}
},
geo:
{
map: 'china',
aspectScale: 1,
zoom: 1.25,
label:
{
normal:
{
show: false,
},
emphasis:
{
show: true,
fontSize: 12 * scale,
color:"#fff"
}
},
itemStyle:
{
normal:
{
areaColor:
{
x: 0, y: 0, x2: 0, y2: 1,
colorStops:
[
{
offset: 0,
color: '#0e309b'
},
{
offset: 1,
color: '#0e309b'
},
],
},
borderColor: '#2abdee',
borderWidth: 2 * scale,
},
emphasis:
{
areaColor:
{
x: 0, y: 0, x2: 0, y2: 1,
colorStops:
[
{
offset: 0,
color: '#fff'
},
{
offset: 1,
color: '#2b91b7'
},
],
},
}
},
},
series:
[
{
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertPointData(mapData),
symbolSize: 15 * scale,
showEffectOn: 'render',
rippleEffect:
{
brushType: 'stroke'
},
hoverAnimation: true,
label:
{
normal:
{
show: true,
formatter: function(param)
{
return param.data.name;
},
position: 'right',
fontSize: 12 * scale,
color: '#fff',
}
},
itemStyle:
{
normal:
{
color: function(param)
{
return param.data.color;
},
shadowBlur: 10,
shadowColor: '#fff'
}
},
zlevel: 1
},
{
type: 'lines',
zlevel: 2,
effect:
{
show: true,
period: 5,
trailLength: 0.2,
symbol: 'arrow',
symbolSize: 4 * scale,
},
lineStyle:
{
normal:
{
color: function(param)
{
return param.data.color;
},
width: 1 * scale,
opacity: 0.2,
curveness: .3
}
},
data: convertLineData(mapData)
},
]
};
myChart.hideLoading();
myChart.setOption(option, true);
myChart.resize();
})
</script>
</body>
</html>
遇到的问题
$.getJSON 请求会报错,跨域问题。
解决:1、json文件放到服务器上,直接请求服务器上的地址。
2、只调试的话,设置谷歌浏览器
请求模拟数据报错: Access to XMLHttpRequest at ‘file:///C:/Users/Administrator/Desktop/test/AJAX/demo_test.txt’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
1、右键chrome,选择属性,在“快捷方式”下的“目标”中添加" --allow-file-access-from-files"(最前面有个空格),重启chrome即可
2、复制项目的路径,在浏览器上重新打开
原文链接:https://blog.csdn.net/weixin_45784582/article/details/108767358
Echarts 在地图上绘制流向图相关推荐
- java echarts 散点图,echarts在地图上绘制散点图(任意点)
项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点 通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/ed ...
- plotly系列| 使用plotly在地图上绘制散点图和密度图
目录 Plotly简介 在地图上制作散点图和密度图 1 . 在python中使用pip命令安装 2 .导入包 3 .读取文件 4 . 在地图上绘制散点图 5 . 绘制密度图,其属性与绘制散点图相似 关 ...
- 在Arcgis地图上绘制Echarts热力图(Heatmap)
在Arcgis地图上绘制Echarts热力图(Heatmap) 2018-08-30 10:18 [原创]本文地址:https://www.cnblogs.com/qiaoge0923/p/95623 ...
- python绘制彩色地震剖面_在地图上绘制饼图时“爆炸”楔形图(Python,matplotlib)...
所以我成功地在地图上绘制了饼图作为标记轴向散射,但我遇到了一些问题,一些楔子"爆炸"出了饼图.我似乎在我的代码中找不到原因,也无法在网上找到解释.这段代码基于示例here,一位同事 ...
- 详解python 利用 pyecharts 画地图(热力图)(世界地图,省市地图,区县地图)、动态流向图
转载: 详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图) Pyecharts绘制全球流向图 pyecharts中文教程官网 目录 安装对应的python模块 世界 ...
- android百度地图轨迹实现,android 获取GPS经纬度在百度地图上绘制轨迹
实现将一组GPS模块获取的经纬度数据在百度地图上绘制轨迹 1.将经纬度转换成百度地图坐标 /** * 标准的GPS经纬度坐标直接在地图上绘制会有偏移,这是测绘局和地图商设置的加密,要转换成百度地图坐标 ...
- Matlab运用mapping包在地图上绘制散点图(热力图)
Matlab运用mapping包在地图上绘制散点图(热力图) 一.前言 Mapping Toolbox是Matlab提供的,一整套包含许多函数跟图形用户界面的工具箱:它可以帮助用户分析几何空间方面的数 ...
- android地图画线,绘制折线-在地图上绘制-开发指南-Android 轻量版地图SDK | 高德地图API...
地图上绘制的线是由 Polyline 类定义实现的,线由一组经纬度(LatLng对象)点连接而成. 绘制一条线 与点标记一样,Polyine的属性操作集中在PolylineOptions类中,添加一条 ...
- android百度地图api两点画线,android百度地图:在地图上绘制点、线、多边形、圆形和文字...
转载自:http://blog.csdn.net/rt77777/article/details/9186691 首先介绍一个类:GraphicsOverlay 这是一个在地图上绘制图形的overla ...
最新文章
- 剑指offer之中判断二叉树是不是对称二叉树(递归和非递归实现)
- Installation error code: -103签名不一致错误
- linux连接u盘是提示usb驱动错误,U盘提示无法访问,由于I/O设备错误,无法运行此项请求3种完美解决办法...
- [转载] python 1
- mysql acid介绍_InnoDB ACID模型介绍
- js同步-异步-回调
- CentOS安装l2tpd
- USACO Section 1.2 Name That Number
- 9.21 小程序开发培训讲座
- PowerBI使用Tabular Editor翻译报表模型
- python入门区块链技术_区块链教程
- 计算机专硕双导师,【计算机专业论文】双导师制人才培养计算机专业论文(共1315字)...
- 这里给详细解答一下自己办理商标注册的申请流程
- 计算机学报在线阅读,计算机学报CHIN.pdf
- Spring MVC+Spring+Mybatis
- 线性代数——矩阵正定性及二次型的矩阵表示
- TCP为什么连接建立需要三次握手,而不是两次握手?
- hdmi口不接显示器,teamviewer连接黑屏
- [Python] 错误“IndentationError: unindent does not match any outer indentation level”是什么意思?...
- 解决Office Word复制粘贴时自动加空格的问题
热门文章
- 业余草总结常见计算广告点击率预估算法
- 两个mapreduce 做topn_老公坚持离婚怎样挽回?怎么做才能挽回老公的心
- springboot 实现elasticsearch索引数据迁移
- 华为手机如何升级鸿蒙系统_华为手机可以进行升级版鸿蒙系统,赶紧看看你的手机可不可以!...
- 062 [转载]如何从一台被铅封的机器上取走数据
- 研究生自学python入门(一)
- MBSE建模学习之六:状态机和状态机图
- 16-响应式布局(bootstrap框架)
- php环境配置步骤,配置PHP服务器环境步骤详解
- 【Qt学习】 FFmpeg 解码播放本地视频