最近有粉丝问我能不能出个案例:地图上的地区文字,或其他标示类的图层,因为区块面积相对太小,想放在地图之外,通过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. 清华特奖答辩前10出炉,两名CS学生3篇顶会一作,有人周读3000页英文论文!
  2. 2018-12-10
  3. knockout的使用
  4. 从上往下打印出二叉树的每个节点,同层节点从左至右打印。
  5. zookeeper配置
  6. python解决最优化问题_python实现最优化算法
  7. UITableview高度计算
  8. 使用JQuery的Blazor日期选择器组件
  9. 汉诺塔的java实现及一种思路
  10. 8-4 redis sentine 安装
  11. 学以致用二---配置Centos7.2 基本环境
  12. 北大中文期刊目录_很遗憾!你看到的“最新版核心期刊目录”又又又是错的!...
  13. 《计算机入门》模拟卷 b卷,《计算机入门》模拟试卷B.doc
  14. 常微分方程——一阶微分方程的初等解法
  15. 来曲唑十二烷基硫酸钠/苯丁酸氮芥/层状双金属氢氧化物纳米杂化物
  16. 云计算产业分析及企业级laaS建设探讨
  17. Office 365禁用所有宏,且不通知
  18. Groovy 和 Java 联合开发环境搭建
  19. 安卓虚拟机_安卓虚拟机雷电模拟器
  20. OpenCV-计算平均值cv::mean

热门文章

  1. Android - 简单的查看APP启动时间
  2. 阿里云Centos7搭建MySql数据库
  3. 14.Java- Spring
  4. java hevc和heif_关于 iOS 和 macOS 的 HEVC 和 HEIF
  5. ios不能保存png_管理各种iOS设备文件的管理软件
  6. Designing Specification
  7. 【亲自验证】Navicat连接MySql提示无法加载身份验证插件“缓存_sha2_密码”?
  8. 关于requests.exceptions.SSLError: HTTPSConnectionPool(host='XXX', port=443)问题
  9. 小程序--实现细线边框
  10. RL 实践(3)—— 悬崖漫步【QLearning Sarsa 各种变体】