創(chuàng)新互聯(lián)建站提供高防服務(wù)器租用、云服務(wù)器、香港服務(wù)器、內(nèi)江服務(wù)器托管等

     MarkPoint是什么效果？如上圖，一閃一閃亮晶晶的效果，這是在Echarts中對(duì)應(yīng)的效果。我最早看到的是騰訊的一個(gè)Flash的版本，顯示當(dāng)前QQ在線人數(shù)的全國(guó)分布效果，感覺(jué)效果很炫，當(dāng)時(shí)也在想，怎么用JS，HTML5來(lái)做出類似的效果，但說(shuō)實(shí)話，沒(méi)什么思路，甚至懷疑JS是否做不出來(lái)這種逼真的效果來(lái)。終于看到Echarts中提供了這個(gè)功能。下面就扒開她絢麗的衣著，一起走進(jìn)MarkPoint的世界。

數(shù)據(jù)

     首先還是先看看數(shù)據(jù)上的邏輯。上圖是一個(gè)數(shù)據(jù)格式，placeList包括每一個(gè)關(guān)鍵點(diǎn)的名稱和坐標(biāo)位置，而在風(fēng)格中主要有name，可以設(shè)置為強(qiáng)中弱三種，分別對(duì)應(yīng)MarkPoint圖中白藍(lán)綠三種效果，類型是中國(guó)地圖，而具體的風(fēng)格在存儲(chǔ)在markPoint字段中。我們?cè)诳纯磎arkPoint字段里面是什么內(nèi)容。

     如上就是markPoint里面的主要內(nèi)容，這里，每一個(gè)點(diǎn)是一個(gè)鉆石（diamond）的樣式，符號(hào)大小，還有一個(gè)effect的屬性，這就是它的動(dòng)畫風(fēng)格，而data則用來(lái)加載placeList的信息。

     綜上所述，對(duì)于使用者而言，指定好要顯示markPoint的位置，也就是placeList，然后在賦予它們的具體效果，中國(guó)范圍，強(qiáng)弱類型以及具體的形狀（鉆石，矩形或圓形等），這樣就可以得到MarkPoint這樣的閃爍效果。

原理

     其實(shí)說(shuō)原理有點(diǎn)夸大其詞。通過(guò)數(shù)據(jù)層面，可以看出來(lái)每一個(gè)點(diǎn)都是獨(dú)立的，如果你放大后，基本可以判斷出來(lái)各自完成自己的動(dòng)畫效果，并一致循環(huán)下去。如果縮小后，你會(huì)發(fā)現(xiàn)所有的markPoint并不是同步的，頻率各不相同，顯得雜亂無(wú)章。（推薦TED的視頻：The First Secret of Great Design - Tony Fadell - TED Talks）。

     這樣，這個(gè)問(wèn)題就分解成了兩個(gè)部分：

• 如何模擬每一個(gè)點(diǎn)的閃爍效果

• 如何管理大規(guī)模的點(diǎn)的閃爍周期

閃爍效果的實(shí)現(xiàn)

     如上，是同一個(gè)markPoint在不同幀下的效果，大家可以想想一下這樣一個(gè)從小到大然后再到小的過(guò)程，則完成了閃爍的效果，如果你足夠細(xì)心會(huì)發(fā)現(xiàn)里面有一個(gè)blur的平滑效果，這樣會(huì)讓閃爍有一個(gè)平滑的效果，類似字體的抗鋸齒，看起來(lái)有一種朦朧的感覺(jué)。當(dāng)然，blur這個(gè)效果是怎么實(shí)現(xiàn)的？其實(shí)在之前風(fēng)向圖和熱點(diǎn)圖中都采用了這個(gè)技術(shù)，就是和上一幀的圖片進(jìn)行一個(gè)半透明的疊加。然后在配合一個(gè)動(dòng)畫特效（animation effect），閃爍的效果就完成了。

多點(diǎn)閃爍動(dòng)畫的實(shí)現(xiàn)

     如上是在某一幀的截圖。俗話說(shuō)的好，一花獨(dú)放不是春，所以如何控制這么多的點(diǎn)，風(fēng)格各不相同的markPoint，而且頻率各不相同，這就涉及到動(dòng)畫類和隨機(jī)數(shù)之間的內(nèi)容，同時(shí)在框架上能夠貫穿整個(gè)渲染周期。

     我們看一下在Echarts上的流程，先是初始化的流程：

     如同，MarkPoint的數(shù)據(jù)初始化主要是Map類讀取數(shù)據(jù)，然后在Base中調(diào)用getLargeMarkPointShape來(lái)創(chuàng)建這些點(diǎn)。

     在Base中，調(diào)用animationEffect指定單個(gè)MarkPoint的閃爍風(fēng)格，這里需要額外說(shuō)明一下，雖然在數(shù)據(jù)中動(dòng)畫風(fēng)格只是簡(jiǎn)單的show:true.但實(shí)際上，最終是采用的config.js中默認(rèn)的動(dòng)畫風(fēng)格，比如周期，是否循環(huán)，跳動(dòng)等，如下圖所示：

     而在ecEffect中，調(diào)用largePoint來(lái)隨機(jī)設(shè)置，實(shí)現(xiàn)各自不同的動(dòng)畫周期。從而完成整改初始化的過(guò)程。

     初始化結(jié)束后，則進(jìn)入到了渲染階段。渲染是采用的zrender框架，而markPoint則是由Animation來(lái)驅(qū)動(dòng)，每一幀都會(huì)調(diào)用update，在onframe中來(lái)設(shè)置每一個(gè)點(diǎn)當(dāng)前的狀態(tài)，比如大小，根據(jù)時(shí)間周期下，線性插值計(jì)算出它應(yīng)該的大?。ㄏ旅鏁?huì)詳細(xì)說(shuō)明），最后調(diào)用Symbol::buildPath實(shí)現(xiàn)所有markPoint的閃爍效果。

     這就是初始化準(zhǔn)備和渲染周期的大致一個(gè)過(guò)程，下面對(duì)主要功能模塊進(jìn)行介紹

實(shí)現(xiàn)代碼

     如上，只是指定了blur為true，則實(shí)現(xiàn)了平滑效果，簡(jiǎn)單不？其實(shí)這用了一個(gè)雙緩存的技術(shù)，在zrender中有一個(gè)Layer對(duì)象，每一幀都會(huì)疊加上一幀的效果，并保存。具體的實(shí)現(xiàn)可以參閱zrender的Layer類，比較簡(jiǎn)單。

閃爍動(dòng)畫有點(diǎn)復(fù)雜，首先，怎么控制一個(gè)markPoint從大到小的這樣一個(gè)線性變換的過(guò)程，動(dòng)畫類是如何控制的，另外對(duì)于不同的markPoint，有這么多點(diǎn)，同一幀下每個(gè)點(diǎn)對(duì)應(yīng)的風(fēng)格也不盡相同，這又是如何控制的。

     首先，這要介紹一下zrender中的Animation類，一個(gè)非常好用強(qiáng)大的類，先看看使用代碼，如下：

     首先，這是一個(gè)when.js風(fēng)格的使用方式，該動(dòng)畫主要用來(lái)控制effectShape的‘style’屬性，即每一幀來(lái)對(duì)style屬性進(jìn)行更新。那更新什么內(nèi)容呢？這就是clip對(duì)象了。

     這里有四個(gè)when，再加上最上面的隨機(jī)的初始大小，也就是說(shuō)一個(gè)周期有5個(gè)控制點(diǎn)，其中clip1 = 100，而clip2 = 0,，這里對(duì)應(yīng)的是該控制點(diǎn)對(duì)應(yīng)markPoint的size的百分比。也就是在這個(gè)周期中，按照如下的插值算法來(lái)控制該點(diǎn)的size。不知道說(shuō)清楚了沒(méi)有，可以自己調(diào)試一下代碼看看。

     這是在一幀下插值計(jì)算當(dāng)前size的百分比，這里采用的線性插值，還有其他多種算法可以選擇，這里是size，所以用的最簡(jiǎn)單的線性插值，你也可以實(shí)現(xiàn)軌跡，或者加速度等不同的公式來(lái)實(shí)現(xiàn)對(duì)應(yīng)的效果。

     插值計(jì)算完了，付給對(duì)應(yīng)的style中randomMap+i屬性上。這里，一共常見了20個(gè)Animation類，這樣就會(huì)有20個(gè)動(dòng)畫效果，來(lái)實(shí)現(xiàn)頻率各自不同的閃爍效果。最后會(huì)調(diào)用zrender的refresh，最終來(lái)到Symbol的渲染階段。這里，每一個(gè)點(diǎn)根據(jù)自己的索引選擇對(duì)應(yīng)的縮放比例percent，然后進(jìn)入下面的繪制階段。

     另外，在對(duì)每一個(gè)點(diǎn)的渲染函數(shù)中，進(jìn)行了進(jìn)一步的優(yōu)化，代碼如下，根據(jù)大小進(jìn)行了簡(jiǎn)化。

     Ok，到此，我想到的關(guān)于MarkPoint的內(nèi)容都已經(jīng)完畢，另外這個(gè)類涉及到一個(gè)大規(guī)模點(diǎn)渲染，等有機(jī)會(huì)對(duì)這方面詳細(xì)研究后在和大家分享。

好想被風(fēng)刮走 刮遍整個(gè)地球的那種 在我愛(ài)的城市停 走 停 走

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：數(shù)據(jù)可視化之MarkPoint-創(chuàng)新互聯(lián)
瀏覽地址：http://jinyejixie.com/article20/dpesjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站改版、品牌網(wǎng)站制作、App設(shè)計(jì)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)