溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2020-09-08 22:55:44 來源:腳本之家 閱讀:1307 作者:前端很忙 欄目:web開發

最近有粉絲問我能不能出個案例:地圖上的地區文字,或其他標示類的圖層,因為區塊面積相對太小,想放在地圖之外,通過labelLine連接到對應的區塊上。今天就分享一個類似簡單的案例,鋪設散點形式鋪設label,部分地區用線連接,地圖以廣州地圖為例:

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

如果需要地圖geojson或js文件的話,可以到我的個人 github 上自?。篽ttps://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),具體參考官方案例,和配置文檔。

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

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女