數(shù)據(jù)可視化之MarkPoint-創(chuàng)新互聯(lián)

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

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

數(shù)據(jù)

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

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

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

原理

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

     這樣，這個問題就分解成了兩個部分：

• 如何模擬每一個點的閃爍效果

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

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

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

多點閃爍動畫的實現(xiàn)

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

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

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

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

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

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

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

實現(xiàn)代碼

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

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

     首先，這要介紹一下zrender中的Animation類，一個非常好用強大的類，先看看使用代碼，如下：

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

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

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

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

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

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

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

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

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

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

廣告

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