Echarts地圖添加引導(dǎo)線效果(labelLine)
最近有粉絲問我能不能出個案例：地圖上的地區(qū)文字，或其他標(biāo)示類的圖層，因為區(qū)塊面積相對太小，想放在地圖之外，通過labelLine連接到對應(yīng)的區(qū)塊上。今天就分享一個類似簡單的案例，鋪設(shè)散點形式鋪設(shè)label，部分地區(qū)用線連接，地圖以廣州地圖為例：
如果需要地圖geojson或js文件的話，可以到我的個人 github 上自?。篽ttps://github.com/zhangqian00/echarts3-mapFile
1、初始化地圖：
2、
聲明label數(shù)據(jù)：
配置需要鋪設(shè)的label，value值為坐標(biāo)點，注釋的四個區(qū)，需要用連線連接到地圖外面，在后面會有單獨配置，所以在此label數(shù)據(jù)里就不必需要了。
3、配置圖層：
將labelData按散點類型，按value對應(yīng)的坐標(biāo)鋪設(shè)到對應(yīng)的位置上。
4、配置使用引導(dǎo)線的label圖層
此處是四個需要使用引導(dǎo)線的區(qū)域label配置，因為連線是兩個點之間連線，所以data中的coords是兩個點的開始點坐標(biāo)和結(jié)束點坐標(biāo)，具體解釋可參考echarts官方配置文檔。
5、最后，應(yīng)用配置
本案例使用的echarts版本為3.x版本。
此案例目的只是啟發(fā)，做到舉一反三，并不是只能鋪設(shè)個label文字，內(nèi)容完全可以自定義，也可以是別的一些內(nèi)容例如：
只是這些需要更多的配置而已（formatter），具體參考官方案例，和配置文檔。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
雖然Uniapp可以使用Vue.js自帶的$http,但也可以使用Axios,只需要在項目中進行簡單的配置,這篇文章主要給大家介紹了關(guān)于uniapp引入axios異步框架的相關(guān)資料,需要的朋友可以參考下2023-12-12
Bootstrap 3.x打印預(yù)覽背景色與文字顯示異常的解決
前幾天同事有個問題咨詢我，他在調(diào)用print()來打印頁面，發(fā)現(xiàn)打印預(yù)覽頁面上的背景色無法顯示以及文字總是顯示為黑色，感覺非常奇怪，我通過測試發(fā)現(xiàn)是Bootstrap的問題，現(xiàn)在將解決的方法分享給大家，希望可以幫助到同樣遇到這個問題的朋友們，下面來一起看看。2016-11-11
這篇文章主要介紹了微信小程序時間軸組件,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
Js中forEach修改原數(shù)組與sort排序經(jīng)典場景詳解
forEach是沒有返回值并且不直接改變原數(shù)組的,今天發(fā)現(xiàn)是不能直接改變,下面這篇文章主要給大家介紹了關(guān)于Js中forEach修改原數(shù)組與sort排序經(jīng)典場景的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了js制作導(dǎo)航菜單實現(xiàn)二級菜單漸隱顯示，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了讓alert不出現(xiàn)彈窗的兩種方法,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了JS實現(xiàn)很酷的水波文字特效,實例分析了javascript操作圖層特效的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
在一個瀏覽器里呈現(xiàn)所有瀏覽器測試結(jié)果的前端測試工具的思路
對前端工程師來說,跨瀏覽器的兼容性問題一直是最頭疼的,測試一個小小的東西,就要打開N個瀏覽器,然后比較來比較去,記錄個瀏覽器的數(shù)據(jù),比較不同,實在是麻煩.2010-03-03
這篇文章主要介紹了JS實現(xiàn)仿微信支付彈窗功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)上傳按鈕并顯示縮略圖小輪子，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05