溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
最近有粉絲問(wèn)我能不能出個(gè)案例：地圖上的地區(qū)文字，或其他標(biāo)示類(lèi)的圖層，因?yàn)閰^(qū)塊面積相對(duì)太小，想放在地圖之外，通過(guò)labelLine連接到對(duì)應(yīng)的區(qū)塊上。今天就分享一個(gè)類(lèi)似簡(jiǎn)單的案例，鋪設(shè)散點(diǎn)形式鋪設(shè)label，部分地區(qū)用線(xiàn)連接，地圖以廣州地圖為例：
如果需要地圖geojson或js文件的話(huà)，可以到我的個(gè)人 github 上自?。篽ttps://github.com/zhangqian00/echarts3-mapFile
1、初始化地圖：
2、
聲明label數(shù)據(jù)：
配置需要鋪設(shè)的label，value值為坐標(biāo)點(diǎn)，注釋的四個(gè)區(qū)，需要用連線(xiàn)連接到地圖外面，在后面會(huì)有單獨(dú)配置，所以在此label數(shù)據(jù)里就不必需要了。
3、配置圖層：
將labelData按散點(diǎn)類(lèi)型，按value對(duì)應(yīng)的坐標(biāo)鋪設(shè)到對(duì)應(yīng)的位置上。
4、配置使用引導(dǎo)線(xiàn)的label圖層
此處是四個(gè)需要使用引導(dǎo)線(xiàn)的區(qū)域label配置，因?yàn)檫B線(xiàn)是兩個(gè)點(diǎn)之間連線(xiàn)，所以data中的coords是兩個(gè)點(diǎn)的開(kāi)始點(diǎn)坐標(biāo)和結(jié)束點(diǎn)坐標(biāo)，具體解釋可參考echarts官方配置文檔。
5、最后，應(yīng)用配置
本案例使用的echarts版本為3.x版本。
此案例目的只是啟發(fā)，做到舉一反三，并不是只能鋪設(shè)個(gè)label文字，內(nèi)容完全可以自定義，也可以是別的一些內(nèi)容例如：
只是這些需要更多的配置而已（formatter），具體參考官方案例，和配置文檔。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
