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 相关文章推荐
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
如何获取vue单文件自身源码路径
May 06 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
杏林同学录(四)
2006/10/09 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
Python下载懒人图库JavaScript特效
2015/05/28 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python+flask实现API的方法
2018/11/21 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
如何在python中执行另一个py文件
2020/04/30 Python
Python之字典对象的几种创建方法
2020/09/30 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
开办化妆品公司创业计划书
2013/12/26 职场文书
班长自荐书范文
2014/02/11 职场文书
师德建设实施方案
2014/03/21 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
销售人员管理制度
2015/08/06 职场文书