Echarts地圖添加引導(dǎo)線效果(labelLine)
最近有粉絲問我能不能出個案例：地圖上的地區(qū)文字，或其他標(biāo)示類的圖層，因?yàn)閰^(qū)塊面積相對太小，想放在地圖之外，通過labelLine連接到對應(yīng)的區(qū)塊上。今天就分享一個類似簡單的案例，鋪設(shè)散點(diǎn)形式鋪設(shè)label，部分地區(qū)用線連接，地圖以廣州地圖為例：
如果需要地圖geojson或js文件的話，可以到我的個人 github 上自?。篽ttps://github.com/zhangqian00/echarts3-mapFile
1、初始化地圖：
2、
聲明label數(shù)據(jù)：
配置需要鋪設(shè)的label，value值為坐標(biāo)點(diǎn)，注釋的四個區(qū)，需要用連線連接到地圖外面，在后面會有單獨(dú)配置，所以在此label數(shù)據(jù)里就不必需要了。
3、配置圖層：
將labelData按散點(diǎn)類型，按value對應(yīng)的坐標(biāo)鋪設(shè)到對應(yīng)的位置上。
4、配置使用引導(dǎo)線的label圖層
此處是四個需要使用引導(dǎo)線的區(qū)域label配置，因?yàn)檫B線是兩個點(diǎn)之間連線，所以data中的coords是兩個點(diǎn)的開始點(diǎn)坐標(biāo)和結(jié)束點(diǎn)坐標(biāo)，具體解釋可參考echarts官方配置文檔。
5、最后，應(yīng)用配置
本案例使用的echarts版本為3.x版本。
此案例目的只是啟發(fā)，做到舉一反三，并不是只能鋪設(shè)個label文字，內(nèi)容完全可以自定義，也可以是別的一些內(nèi)容例如：
只是這些需要更多的配置而已（formatter），具體參考官方案例，和配置文檔。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS基于VUE組件實(shí)現(xiàn)城市列表效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
js監(jiān)聽輸入框值的即時變化onpropertychange、oninput
很多情況下我們都會即時監(jiān)聽輸入框值的變化，以便作出即時動作去引導(dǎo)瀏覽者增強(qiáng)網(wǎng)站的用戶體驗(yàn)感。2011-07-07
等待控件在網(wǎng)上搜有好多種，但是都很復(fù)雜，不一定用的順手，再說我的項(xiàng)目是bootstrap的原因，又不敢輕易使用第三方控件，怕不兼容，于是自己動手寫了個等待控件，有需要的朋友可以參考下2015-10-10
全選反選checkbox在實(shí)際應(yīng)用中比較常見，本文有個不錯的示例，大家可以參考下2014-03-03
這篇文章主要為大家介紹了tree?shaking功能及使用原理詳細(xì)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪的相關(guān)資料2023-01-01
今天小編就為大家分享一篇layerUI下的綁定事件實(shí)例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了javascript的變量與標(biāo)識符，感興趣的小伙伴們可以參考一下2016-01-01
本篇文章主要介紹了Webpack打包字體font-awesome的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
js實(shí)現(xiàn)div閃爍原理及實(shí)現(xiàn)代碼
閃爍的原理是什么呢：其實(shí)就一個，display在none與block之間頻繁的交替，這樣說你明白了么，示例代碼如下，希望對大家有所幫助2014-06-06
JSON+JavaScript處理JSON的簡單例子，需要的朋友可以參考一下2013-03-03