当前位置: 首页 > 编程笔记 >

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

满和安
2023-03-14
本文向大家介绍Echarts地图添加引导线效果(labelLine),包括了Echarts地图添加引导线效果(labelLine)的使用技巧和注意事项,需要的朋友参考一下

最近有粉丝问我能不能出个案例:地图上的地区文字,或其他标示类的图层,因为区块面积相对太小,想放在地图之外,通过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),具体参考官方案例,和配置文档。

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

 类似资料:
  • 问题内容: 我正在使用bootstrap,我想在下拉菜单中添加动画。我要向其中添加动画,滑出时将其上下滑动。我该怎么办? 问题答案: 如果您更新到Bootstrap3(BS3),它们会暴露很多Java事件,可以很好地将所需的功能绑定到其中。在BS3中,此代码将为所有下拉菜单提供所需的动画效果:

  • 用Echarts GL怎么实现这种效果 有没有类似例子的配置代码参考

  • 演示 ios7 中系统提供的画线导航功能。本例中使用当前位置作为出发点,需要真机调试。用户可自行修改为固定经纬度的出发点。 [Code4App.com]

  • 本文向大家介绍iOS实现动态元素的引导图效果,包括了iOS实现动态元素的引导图效果的使用技巧和注意事项,需要的朋友参考一下 前言 最近越来越多的APP,已经抛弃掉第一次进入的3-4页的导入页面,而是另外采取了在功能页面悬浮一个动态效果来展示相应的功能点。这个模块主要是实现app首次进入时显示的动态的引导图,在用户进行右滑或者左滑的时候,屏幕上的一些元素做出相应的隐藏消失以及位置移动。 实现效果:

  • 这是一个echarts图,现在需要给未掌握后面的数字14114添加一个下划线,应该怎么做?以下是数据源data的代码,现在需要给data的每一项的name里面的a添加一个下划线,查了很多资料感觉实现不了