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

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

1、初始化地图:

2、

声明label数据:

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

3、配置图层:

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

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

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

5、最后,应用配置

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

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

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

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

echarts上加横线标线_Echarts地图添加引导线效果(labelLine)相关推荐

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

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

  2. echars 地图添加引导线效果

    ·引入地图数据.配置基础地图 await axios.get("../../../static/json/map/yantai.json", {}).then(yantaiJson ...

  3. echarts上加横线标线_在百度echarts中添加标识线markLine

    option ={ title : { text:'某楼盘销售情况', subtext:'纯属虚构'}, tooltip : { trigger:'axis'}, legend: { data:['意 ...

  4. echarts饼状图设置label的交互效果,饼状图鼠标浮上图形才显示label和视觉引导线

    echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...

  5. echarts——地图map加引导线、labelLine效果

    echarts地图map有时因数据较密集,label会叠加在一起,只有饼图pie有labelLine引导线,如下两种方法可以实现地图map添加引导线. 实现效果如下,可以直接在echarts编辑器运行 ...

  6. Echarts显示自定义标注点/地图map引导线

    Echarts显示自定义标注点/地图map引导线 先贴效果.这里实现了 1.地图上县区名的显示,鼠标移入显示相应的项目数(如下图东源县) 2.地图上增加自定义地图(这里增加了没有的高新区&市辖 ...

  7. 饼图加引导线_【如何在饼形图中添加引导线(Excel)】excle里面一条竖状线

    EXCEL中如何插入图表,有两个竖轴,图内一个柱状,一个线状图, 在EXCEL中先做好表格(需要的数据),点击插入中的图表.选择自定义图标,其中有项柱状-线状格式.点击下一步后按步骤就可以完成了 Ex ...

  8. 日化美妆如何在高德地图上投放广告?高德地图投放广告的效果

    在高德地图上投放日化美妆类的广告是有要求的,像是一般类的化妆品产品,个人护理产品和家用的清洁品牌产品是可以投放的,带有保健或者治疗效果的特殊化妆品或者私人用品等产品是不允许投放的,特殊化产品包括染发, ...

  9. 饼图加引导线_如何在饼形图中添加引导线(Excel)/

    excel的饼图如何显示百分比的小数! 1.选中数据. 2.点击插入饼状图. 3.插入饼状图后中饼状图,点击右上角的加号. 4.勾据标签,数据就出来了. 5.选中数据,点击鼠标右键,选择设置数据标签格 ...

最新文章

  1. python-web自动化-Python+Selenium之expected_conditions:各种判断
  2. FastQC结果解读
  3. Power Shell03 在PowerShell 3.0重新启动计算机指令
  4. Python判断字符串是否xx开始或结尾
  5. hibernate防止sql注入对参数赋值传参数的例子
  6. PHP读取创建txt,doc,xls,pdf类型文件
  7. 纪念张首晟教授:英魂长存于行行字迹 何惧漫漫征途
  8. QQ网页登陆密码加密方式(农场、空间、WebQQ等通用)
  9. python存储json数据_python 存储json数据
  10. 页面文件太小无法完成操作_PPT操作界面基础解析
  11. 更快学习 JavaScript的6个思维技巧
  12. JDK/Java SE官方文档汇总
  13. attempt to write a readonly database 错误
  14. HTML5+CSS3从入门到精通
  15. 微信小程序轮播中的current_手把手教你美化微信小程序中的轮播效果
  16. selenium 模拟IE浏览器click元素无反应的解决方案 (python3)
  17. 【OpenGL学习笔记⑤】——纹理变换【glm配置+两张图片交替渐变变换 + 纹理平移 + 实现雪花飘落】
  18. 企业微信如何添加员工账户?
  19. 【C语言】qsort函数使用(详解)
  20. linux哪个版本支持tipc,Linux TIPC 2.0 Programmerapos;s Guide文档.doc

热门文章

  1. java实现qq邮箱发送附件和图片
  2. 汉王科技在人民大会堂响起自主品牌的高亢之声
  3. element级联选择器城市3级联动三级联动json数据
  4. python中的pd是什么意思_python中pd的用法 python中列表的用法
  5. unity3d发布安卓出错plese set the package name
  6. echarts百度地图涟漪效果
  7. 一名3年工作经验的程序员应该具备的技能 !
  8. oracle是什么软件可以卸载吗,卸载Oracle软件
  9. 致刚就业迷茫的你和寄语大学毕业生--技术读者
  10. 一个计算机爱好者的不完整回忆(十)插播游戏