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

創(chuàng)新互聯(lián)是一家集網(wǎng)站設計、成都做網(wǎng)站、網(wǎng)站頁面設計、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)的建站公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設服務。追求良好的瀏覽體驗,以探求精品塑造與理念升華,設計最適合用戶的網(wǎng)站頁面。 合作只是第一步，服務才是根本,我們始終堅持講誠信，負責任的原則，為您進行細心、貼心、認真的服務,與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。

如果需要地圖geojson或js文件的話，可以到我的個人 github 上自?。篽ttps://github.com/zhangqian00/echarts3-mapFile

1、初始化地圖：

2、

聲明label數(shù)據(jù)：

配置需要鋪設的label，value值為坐標點，注釋的四個區(qū)，需要用連線連接到地圖外面，在后面會有單獨配置，所以在此label數(shù)據(jù)里就不必需要了。

3、配置圖層：

將labelData按散點類型，按value對應的坐標鋪設到對應的位置上。

4、配置使用引導線的label圖層

此處是四個需要使用引導線的區(qū)域label配置，因為連線是兩個點之間連線，所以data中的coords是兩個點的開始點坐標和結束點坐標，具體解釋可參考echarts官方配置文檔。

5、最后，應用配置

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

此案例目的只是啟發(fā)，做到舉一反三，并不是只能鋪設個label文字，內(nèi)容完全可以自定義，也可以是別的一些內(nèi)容例如：

只是這些需要更多的配置而已（formatter），具體參考官方案例，和配置文檔。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文名稱：Echarts地圖添加引導線效果(labelLine)-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://weahome.cn/article/goihj.html