Echarts地图添加引导线效果(labelLine)


Posted in Javascript onSeptember 30, 2019

最近有粉丝问我能不能出个案例:地图上的地区文字,或其他标示类的图层,因为区块面积相对太小,想放在地图之外,通过labelLine连接到对应的区块上。今天就分享一个类似简单的案例,铺设散点形式铺设label,部分地区用线连接,地图以广州地图为例:

Echarts地图添加引导线效果(labelLine)

如果需要地图geojson或js文件的话,可以到我的个人 github 上自取:https://github.com/zhangqian00/echarts3-mapFile

1、初始化地图:

Echarts地图添加引导线效果(labelLine)2、

声明label数据:

Echarts地图添加引导线效果(labelLine)

配置需要铺设的label,value值为坐标点,注释的四个区,需要用连线连接到地图外面,在后面会有单独配置,所以在此label数据里就不必需要了。

3、配置图层:

Echarts地图添加引导线效果(labelLine)

将labelData按散点类型,按value对应的坐标铺设到对应的位置上。

4、配置使用引导线的label图层

Echarts地图添加引导线效果(labelLine)

此处是四个需要使用引导线的区域label配置,因为连线是两个点之间连线,所以data中的coords是两个点的开始点坐标和结束点坐标,具体解释可参考echarts官方配置文档。

5、最后,应用配置

Echarts地图添加引导线效果(labelLine)

本案例使用的echarts版本为3.x版本。

此案例目的只是启发,做到举一反三,并不是只能铺设个label文字,内容完全可以自定义,也可以是别的一些内容例如:

Echarts地图添加引导线效果(labelLine)Echarts地图添加引导线效果(labelLine)

只是这些需要更多的配置而已(formatter),具体参考官方案例,和配置文档。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
javascript实现摄像头拍照预览
Sep 30 #Javascript
java和js实现的洗牌小程序
Sep 30 #Javascript
JS使用H5实现图片预览功能
Sep 30 #Javascript
在vue中使用jsx语法的使用方法
Sep 30 #Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 #Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 #Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 #Javascript
You might like
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
在Python中增加和插入元素的示例
2018/11/01 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
读书月活动方案
2014/05/22 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
关键在于落实心得体会
2014/09/03 职场文书
法人代表证明书
2014/09/18 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2014年公司工作总结
2014/11/22 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python