Echarts3——绘制世界地图中其他地方到中国城市

Echarts3绘制世界地图航线指南

最新推荐文章于 2025-07-17 13:13:38 发布

置顶

lazycat92

最新推荐文章于 2025-07-17 13:13:38 发布

阅读量2.4w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： echarts-地图地图航线 js

本文链接：https://blog.youkuaiyun.com/weixin_38393037/article/details/76618155

本文介绍了如何使用Echarts3绘制从世界其他地方到中国城市的航线效果。通过三种不同的展示方式，展示了最终的综合效果。主要内容包括准备工作，如获取echarts.js和world.js/world.json文件，以及城市经纬度数据。在HTML中设置DOM容器，并在JavaScript中实现核心的绘制逻辑。文章强调了初期理解Echarts API和寻找相关资源所花费的时间，提供了世界地图与城市经纬度的资源链接。

Echart3绘制世界地图航线

基于echarts demo

做完的最终效果如图所示（使用了三种效果叠加而成）：

这里写图片描述

第一种效果
这里写图片描述

第二种效果
这里写图片描述

第三种效果

准备工作

echarts.js 下载链接
world.js/world.json（最新更新2018-11-28）下载链接
城市经纬度获取方法

引入相关文件

<!-- 引入echart.js, 3.0的版本 -->
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>

<!-- 引入世界地图，上面链接可以下载，也可以用相关的json文件 -->
<script src="js/world.js" type="text/javascript" charset="utf-8"></script>
<