最近遇到些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. http GET 和 POST 请求的优缺点和误区

    (1)post更安全(不会作为url的一部分,不会被缓存.保存在服务器日志.以及浏览器浏览记录中) (2)post发送的数据更大(get有url长度限制) (3)post能发送更多的数据类型(get只 ...

  2. LeetCode 腾讯精选50题--求众数

    由于众数是指数组中相同元素的个数超过数组长度的一半,所以有两种思路,一. 先排序,后取排序后的数组的中间位置的值:二. 统计,设定一个变量统计相同元素出现的次数,遍历数组,若与选定的元素相同,统计变量 ...

  3. 使用display:table实现两列自适应布局

    在张鑫旭大神那边看到的方法,我自己写了一遍,稍微添加了一些自己的风格特色. IE6/7不支持这个属性,从IE8开始支持这个属性,对于IE6/7可以用display:inline-block解决. ta ...

  4. docker-compose deploy replicaSet in standalone MongoDB cluster and with auth

    经过两天的折腾,终于实现了自己想要的效果,就是通过docker-compose 部署最新的mongodb replicaSet, 主要是为了测试 4.2 最新的多文档事务,下面将整个步骤分享一下: d ...

  5. uni-app中nvue (weex) 注意事项

    前言 uni-app 是 DCloud 出品的新一代跨端框架,可以说是目前跨端数最多的框架之一了,目前支持发布到:App(Android/iOS).H5.小程序(微信小程序/支付宝小程序/百度小程序/ ...

  6. JS__POST

    RSA加密 熟悉的东西 public key Encrypt (函数) 而且 每次刷新都会变化() 一般 128 位,也有 256位的

  7. uuid：全局唯一标识符

    uuid1:IEEE 802 MAC地址 import uuid ''' UUID1值使用主机的MAC地址计算.uuid模块使用getnode函数来获取当前系统的MAC值 ''' print(uuid ...

  8. Linux环境下交叉编译器安装及运行

    描述: 由于 使用第三方编译器是提示No such file or directory 原因:编译器为32位版本,而系统是64位的 解决方法:安装32位版本编译支持库 sudo apt-get ins ...

  9. storm入门基本知识

    引言 介绍storm之前,我先抛出这两个问题: 1.实时计算需要解决些什么问题? 2.storm作为实时计算到底有何优势? storm简介 官方介绍: Apache Storm is a free a ...

  10. String 类的常用方法都有那些？（未完成）

    String 类的常用方法都有那些?(未完成)