Echarts4+EchartsGL 3D迁徙图（附源码）

最新推荐文章于 2024-06-28 15:09:23 发布

小豆子憨0622

最新推荐文章于 2024-06-28 15:09:23 发布

阅读量5.9k

点赞数 3

分类专栏：代码文章标签： echats 3D地图

本文链接：https://blog.csdn.net/qq_29773123/article/details/86541629

版权

本文介绍了如何使用Echarts4和Echarts GL创建3D迁徙图。在详细讲解过程中，作者分享了实现3D迁徙图的步骤，包括所需引用的文件、地图文件的获取，以及html和js代码的编写，旨在帮助开发者避免常见问题，快速上手3D迁徙图的制作。

摘要由CSDN通过智能技术生成

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

一、效果图
星空背景为canvas开发，此处不提供相关代码
二、准备引用文件
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>

2、html代码

<body> 
	<div id="mapBox"></div>
</body

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

最低0.47元/天解锁文章

小豆子憨0622

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
9
评论
Echarts4+EchartsGL 3D迁徙图（附源码）

最近遇到些Echarts迁徙图问题，在实现二维地图的迁徙图后开始开发3D迁徙图，在网上一查，发现3D版本迁徙图资料较少，自己研究并借鉴一些资料后写了一个demo，希望能帮大家少走些弯路，共同学习。一、效果图二、准备引用文件1、Echarts：Echarts4下载2、Echarts GL：Echarts GL1下载3、地图文件下载，js版本或json版本均可三、代码1、文件引用&amp;amp;amp;l...
复制链接

扫一扫