欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年09月30日 16:24:41   作者:前端很忙  
這篇文章主要介紹了Echarts地圖添加引導(dǎo)線效果(labelLine),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最近有粉絲問(wèn)我能不能出個(gè)案例:地圖上的地區(qū)文字,或其他標(biāo)示類的圖層,因?yàn)閰^(qū)塊面積相對(duì)太小,想放在地圖之外,通過(guò)labelLine連接到對(duì)應(yīng)的區(qū)塊上。今天就分享一個(gè)類似簡(jiǎn)單的案例,鋪設(shè)散點(diǎn)形式鋪設(shè)label,部分地區(qū)用線連接,地圖以廣州地圖為例:

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

1、初始化地圖:

公眾號(hào):前端很忙2、

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

公眾號(hào):前端很忙

配置需要鋪設(shè)的label,value值為坐標(biāo)點(diǎn),注釋的四個(gè)區(qū),需要用連線連接到地圖外面,在后面會(huì)有單獨(dú)配置,所以在此label數(shù)據(jù)里就不必需要了。

3、配置圖層:

公眾號(hào):前端很忙

將labelData按散點(diǎn)類型,按value對(duì)應(yīng)的坐標(biāo)鋪設(shè)到對(duì)應(yīng)的位置上。

4、配置使用引導(dǎo)線的label圖層

公眾號(hào):前端很忙

此處是四個(gè)需要使用引導(dǎo)線的區(qū)域label配置,因?yàn)檫B線是兩個(gè)點(diǎn)之間連線,所以data中的coords是兩個(gè)點(diǎn)的開(kāi)始點(diǎn)坐標(biāo)和結(jié)束點(diǎn)坐標(biāo),具體解釋可參考echarts官方配置文檔。

5、最后,應(yīng)用配置

公眾號(hào):前端很忙

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

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

公眾號(hào):前端很忙公眾號(hào):前端很忙

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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • uniapp引入axios異步框架的完整步驟

    uniapp引入axios異步框架的完整步驟

    雖然Uniapp可以使用Vue.js自帶的$http,但也可以使用Axios,只需要在項(xiàng)目中進(jìn)行簡(jiǎn)單的配置,這篇文章主要給大家介紹了關(guān)于uniapp引入axios異步框架的相關(guān)資料,需要的朋友可以參考下
    2023-12-12
  • Bootstrap 3.x打印預(yù)覽背景色與文字顯示異常的解決

    Bootstrap 3.x打印預(yù)覽背景色與文字顯示異常的解決

    前幾天同事有個(gè)問(wèn)題咨詢我,他在調(diào)用print()來(lái)打印頁(yè)面,發(fā)現(xiàn)打印預(yù)覽頁(yè)面上的背景色無(wú)法顯示以及文字總是顯示為黑色,感覺(jué)非常奇怪,我通過(guò)測(cè)試發(fā)現(xiàn)是Bootstrap的問(wèn)題,現(xiàn)在將解決的方法分享給大家,希望可以幫助到同樣遇到這個(gè)問(wèn)題的朋友們,下面來(lái)一起看看。
    2016-11-11
  • 微信小程序時(shí)間軸組件的示例代碼

    微信小程序時(shí)間軸組件的示例代碼

    這篇文章主要介紹了微信小程序時(shí)間軸組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-05-05
  • Js中forEach修改原數(shù)組與sort排序經(jīng)典場(chǎng)景詳解

    Js中forEach修改原數(shù)組與sort排序經(jīng)典場(chǎng)景詳解

    forEach是沒(méi)有返回值并且不直接改變?cè)瓟?shù)組的,今天發(fā)現(xiàn)是不能直接改變,下面這篇文章主要給大家介紹了關(guān)于Js中forEach修改原數(shù)組與sort排序經(jīng)典場(chǎng)景的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • js實(shí)現(xiàn)二級(jí)菜單漸隱顯示

    js實(shí)現(xiàn)二級(jí)菜單漸隱顯示

    這篇文章主要介紹了js制作導(dǎo)航菜單實(shí)現(xiàn)二級(jí)菜單漸隱顯示,感興趣的小伙伴們可以參考一下
    2015-11-11
  • 讓alert不出現(xiàn)彈窗的兩種方法

    讓alert不出現(xiàn)彈窗的兩種方法

    這篇文章主要介紹了讓alert不出現(xiàn)彈窗的兩種方法,需要的朋友可以參考下
    2014-05-05
  • JS實(shí)現(xiàn)很酷的水波文字特效實(shí)例

    JS實(shí)現(xiàn)很酷的水波文字特效實(shí)例

    這篇文章主要介紹了JS實(shí)現(xiàn)很酷的水波文字特效,實(shí)例分析了javascript操作圖層特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-02-02
  • 在一個(gè)瀏覽器里呈現(xiàn)所有瀏覽器測(cè)試結(jié)果的前端測(cè)試工具的思路

    在一個(gè)瀏覽器里呈現(xiàn)所有瀏覽器測(cè)試結(jié)果的前端測(cè)試工具的思路

    對(duì)前端工程師來(lái)說(shuō),跨瀏覽器的兼容性問(wèn)題一直是最頭疼的,測(cè)試一個(gè)小小的東西,就要打開(kāi)N個(gè)瀏覽器,然后比較來(lái)比較去,記錄個(gè)瀏覽器的數(shù)據(jù),比較不同,實(shí)在是麻煩.
    2010-03-03
  • JS實(shí)現(xiàn)仿微信支付彈窗功能

    JS實(shí)現(xiàn)仿微信支付彈窗功能

    這篇文章主要介紹了JS實(shí)現(xiàn)仿微信支付彈窗功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-06-06
  • js實(shí)現(xiàn)上傳按鈕并顯示縮略圖小輪子

    js實(shí)現(xiàn)上傳按鈕并顯示縮略圖小輪子

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳按鈕并顯示縮略圖小輪子,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-05-05

最新評(píng)論