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 相关文章推荐
图片完美缩放
Sep 07 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
React快速入门教程
Jan 17 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
使用jQuery实现购物车
Oct 29 jQuery
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
一个简单实现多条件查询的例子
2006/10/09 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
举例讲解Python中is和id的用法
2015/04/03 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
使用Python绘制图表大全总结
2017/02/11 Python
python中logging包的使用总结
2018/02/28 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
大二法英学生职业生涯规划范文
2014/02/27 职场文书
《桥》教学反思
2014/04/09 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL