Echarts地圖添加引導線效果(labelLine)

 更新時間:2019年09月30日 16:24:41   作者:前端很忙   我要評論
這篇文章主要介紹了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),具體參考官方案例,和配置文檔。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論

北京pk赛车人工计划软件手机版