Echarts4+EchartsGL 3D迁徙图（附源码）
最近遇到些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迁徙图（附源码）的更多相关文章
- leaflet 结合 Echarts4 实现迁徙图(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- arcgis api 4.x for js 结合 Echarts4 实现散点图效果（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- leaflet实现风场图(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- wpf 模拟3D效果(和手机浏览图片效果相似)（附源码）
原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依 ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- openlayers4 入门开发系列结合 echarts4 实现散点图（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载)
前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...
- cesium 实现风场图效果(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- Vue过渡和动画效果展示（案例、GIF动图演示、附源码）
前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...
随机推荐
- SpringBoot+MyBatis+Mysql 6.X 版本日期型数据获，时间错乱，jason序列化时间相差8小时问题
新项目是用的springboot+mybatis+mysql 6.0.6版本的驱动包来搭建的,在使用的过程中遇到以下2个问题 从mysql取的的数据日期时间,与真实的时间往后错乱了14个小时. spr ...
- .net 调用 winapi获取窗口句柄和内容
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- 01_Redis简述
一:关系型数据库和非关系型数据库的区别: 1:关系型数据库(SQL):数据和数据之间,表和字段之间,表和表之间是存在关系的: 优点:数据之间有关系,进行数据的增删改查时非常方便的:关系型数据库有事务操 ...
- __builtin_ _Find_first()
•int __builtin_ffs (unsigned int x) 返回x的最后一位1的是从后向前第几位,比如7368(1110011001000)返回4. •int __builtin_clz ...
- Introduction to Go Modules
转:https://roberto.selbach.ca/intro-to-go-modules/ git init git add * git commit -am "First comm ...
- 如何在网页标题栏title加入logo(icon)图标？
打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者书签中时也会出现网页的图标,怎么在网页title左边显示网页的logo图标呢? 方法一(被动式): 制作一个ico格式 ...
- Oracle中dual表的用途
dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情,如下: 1.查看当前用户,可以在 SQL Plus中执行下面语句 sele ...
- rontab踩坑（三）：crontab定时任务调度机制与系统时间/时区的不一致
解决方案: 因为我们的服务器在是肯尼亚: 我么查看一下localtime 是否和 时区一致? 可以看到是一致的. 应该是是配置改动后未重启! service crond restart
- hivesql中的concat函数,concat_ws函数，concat_group函数之间的区别
一.CONCAT()函数CONCAT()函数用于将多个字符串连接成一个字符串.使用数据表Info作为示例,其中SELECT id,name FROM info LIMIT 1;的返回结果为 +---- ...
- .net core Areas区域
//使用MVC app.UseMvc(routes => { routes.MapRoute( name: "areas", template: "{area:ex ...