最近遇到些Echarts迁徙图问题，在实现二维地图的迁徙图后开始开发3D迁徙图，在网上一查，发现3D版本迁徙图资料较少，自己研究并借鉴一些资料后写了一个小demo，希望能帮大家少走些弯路，共同学习。

一、效果图

二、准备引用文件
1、Echarts：Echarts4下载
2、Echarts GL：Echarts GL1下载
3、地图文件下载，js版本或json版本均可

三、代码（以json地图为例）
1、文件引用

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/echarts4.js"></script>
<script src="~/Scripts/echarts-gl.js"></script>
1
2
3
2、html代码

<body>
<div id="mapBox"></div>
</body
1
2
3
3、js代码

<script type="text/javascript">
//从json文件中取出地图信息
$.get('/guangdong.json', function (chinaJson) {
echarts.registerMap('jiangmen', chinaJson);
var mapBoxEchart = echarts.init(document.getElementById('mapBox'));
mapBoxEchart.setOption({
geo3D: {
map: 'jiangmen',
type: 'map',
boxHeight: 2.2,
regionHeight: 2,
roam: true,
label: {
//地图上是否显示市区名称
normal: {
show: true,
color: "#FFF76D"
},
emphasis: {
show: true,
color: "#FFF76D"
}
},
itemStyle: {
//color: '#00287A',
color:"#2E55FC",
borderColor: '#00287A', //省份的边框颜色 330867
borderWidth: 1.5, //省份的边框宽度
opacity: 0.5
},
emphasis: {
color: 'rgba(10, 21, 67, 0.3)',
borderWidth: 1,
borderColor: '#3fdaff',
//areaColor: "#7DC3DE",
shadowColor: '#fff',
opacity: 0.5,
shadowBlur: 30
},
light: { //光照阴影
main: {
color: '#2F85DC', 　　　　//光照颜色
intensity: 2, 　　　　　　//光照强度
shadowQuality: 'high', 　　//阴影亮度
shadow: true, 　　　　　　//是否显示阴影
alpha: 50,
beta: 10
},
ambient: {
intensity: 0
}
},
postEffect: {
enable: true,
bloom: {
enable: true
}
},
groundPlane: {
show: false
},
shading: 'realistic',
zoomSensitivity: 10 //缩放灵敏度
}，
series: [
{
//配置路径
type: 'lines3D',
coordinateSystem: 'geo3D',
polyline: 'true',
blendMode: 'lighter',
zlevel: 102,
effect: {
show: true,
trailWidth: 3,
trailOpacity: 0.5,
trailLength: 0.2,
constantSpeed: 5
},
lineStyle: {
color: '#FFB728',
opacity: 0.8,
width: 1.5
},
data: [
{
coords: [[113.149649, 22.617641], [112.88089,22.583612]],
// 数据值
value: 100,
// 数据名
name: '测试一',
// 线条样式
lineStyle: {}
}, {
coords: [[112.316858, 22.186088], [112.88089,22.583612]],
// 数据值
value: 100,
// 数据名
name: '测试二',
// 线条样式
lineStyle: {}
}
]
},{
//配置位置标记点
type: 'scatter3D',
coordinateSystem: 'geo3D',
symbol: 'circle',
symbolSize: 15,
blendMode: 'lighter',
zlevel: 11,
label: {
show: true,
position: 'top',
formatter: '{b}',
textStyle: {
color: '#000',
fontFamily: "Microsoft YaHei",
}
},
itemStyle: {
color: '#a8edea' //标记颜色
},
data: [{ name: '测试一', value: [113.149649, 22.617641, 100] },
{ name: '测试二', value: [112.316858, 22.186088, 100] }]
},{
//配置攻击点
type: 'scatter3D',
coordinateSystem: 'geo3D',
symbol: 'pin', symbolSize: function (val) {
var ret;
if ((val[2] >= 0) && (val[2] < 1000)) {
ret = 50;
} else {
ret = 65;
}
return ret;
},
blendMode: 'lighter',
zlevel: 11,
label: {
show: true,
position: 'top',
//formatter: '{b}',
formatter: function (params) {
var ret = params.value[2];
return ret;
},
textStyle: {
color: '#000',
fontFamily: "Microsoft YaHei",
fontWeight: 'bold'
}
},
itemStyle: {
show: true,
color: '#eb4f38'
},
data: [{ name: '中心', value: [112.88089,22.583612, 200] }]
}
]

}）；
}）；
</script>

4、总结
要实现Echarts 3D迁徙图主要是引用全相关文件并进行相关配置，注意使用正确的数据结构即可，希望能对大家略有帮助。
---------------------
作者：小豆子憨0622
来源：CSDN
原文：https://blog.csdn.net/qq_29773123/article/details/86541629
版权声明：本文为博主原创文章，转载请附上博文链接！

Echarts4+EchartsGL 3D迁徙图（附源码）的更多相关文章

  1. leaflet 结合 Echarts4 实现迁徙图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  2. arcgis api 4.x for js 结合 Echarts4 实现散点图效果（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  3. leaflet实现风场图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  4. wpf 模拟3D效果(和手机浏览图片效果相似)（附源码）

    原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依 ...

  5. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  6. openlayers4 入门开发系列结合 echarts4 实现散点图（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  7. openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载)

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...

  8. cesium 实现风场图效果(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  9. Vue过渡和动画效果展示（案例、GIF动图演示、附源码）

    前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...

随机推荐

  1. arcgis js 之 渔网工具(调用地图服务)

    arcgis js 之 渔网工具(调用地图服务) 原理: 简历不同级别的网渔网图层,设置显示比例尺.然后发布服务,使用MapImageLayer接收. 过程: 1.在arcmap中用创建渔网工具将不同 ...

  2. 转载：Web安全X-FRAME-OPTIONS 出现两个或多个的原因

    转载:https://blog.csdn.net/Teemo_2016/article/details/82051523 在配置文件中配置了 <httpProtocol>     < ...

  3. iTop4412开发板+虚拟机+tftp服务

    感觉好坑啊 利用路由器+2根网线+tftp服务 首先是开发板,主机,虚拟机相互之间能ping通(坑), 关闭主机防火墙,防止被强 关闭虚拟机防火墙 虚拟机装上tftpd服务端(通过网上教程嘛) 是不是 ...

  4. JavaSpring【七、AspectJ】

    AspectJ 概念 @AspectJ类似纯Java注解的普通Java类 Spring可以使用AspectJ来作为切入点 AOP在运行时仍是纯SpringAOP,对AspectJ无依赖 配置: 对@A ...

  5. SSH配置（同一服务器不同用户）

    一.cxwh用户ssh免密登陆至xtjk用户 1.cxwh用户执行 ssh-keygen -t rsa -N "" -f /home/cxwh/.ssh/id_rsa cp /ho ...

  6. late_initcall 替换 module_init

    今天在调试pwm驱动程序的时候,在__init函数中调用pwm_init后,则以太网不可用.pwm_init放在设备文件的open函数中,则系统正常运行. 这当中的区别就是硬件初始化函数pwm_ini ...

  7. python+selenium之——pip环境变量配置

    将pip的路径……\Python37-32\Scripts添加进Path: 而非……\Python37-32\Lib\site-packages\pip-18.1-py3.7.egg

  8. Python求均值，方差，标准差

    import numpy as nparr = [1,2,3,4,5,6]#求均值arr_mean = np.mean(arr)#求方差arr_var = np.var(arr)#求标准差arr_st ...

  9. Codeforces Round #588 (Div. 1) C. Konrad and Company Evaluation

    直接建反边暴力 复杂度分析见https://blog.csdn.net/Izumi_Hanako/article/details/101267502 #include<bits/stdc++.h ...

  10. javascript只弹出一次框 再次刷新不弹出

    .打开页面自动弹出  当关闭弹框的时候  设置cookie生存时间  再次刷新页面判断cookie是否失效 <html> <head> <meta charset=&qu ...