天天看點

【MVP月度主題分享】通過dataV制作實時資料大屏

<b>項目概述</b>

臨近年底,出總結的時候又到了,在一個夜黑風高的夜晚,産品老大問了我幾個問題

* 如何向使用者展現咱們的技術實力?

* 如何跟其他使用者一起互動?

* 之前的資料專題頁面有什麼可以提升的?

資料專題頁的價值在于通過披露平台的使用者資料、投資資料、兌付情況等資料實時向投資人披露平台的全方位情況。

定量化的向投資人展示平台的發展情況,增強投資人對我們的認知和信心。

但是現在我們可能更需要在資料表達的層面使用更多樣化的形式為投資人展示資料。

包含但不限于圖表、動效、地圖等效果,讓投資人更直覺、清晰的從資料唯獨了解平台的發展情況。

【MVP月度主題分享】通過dataV制作實時資料大屏
【MVP月度主題分享】通過dataV制作實時資料大屏

       目前傳統的展示功能是客觀的反映投資使用者的總體資料和地域分布,而更新後的動态資料儀表盤,能夠突出每個時間點的投 資人數、投資金額和地域分布,更好的顯示出實時更新的資料,具備可觀性和真實性。

       如今的資料可視化緻力于用更生動、友好的形式,即時呈現隐藏在瞬息萬變且龐雜資料背後的業務洞察。通過互動式實時資料可視化視屏牆來幫助業務人員發現、診斷業務問題,越來越成為大資料解決方案中不可或缺的一環。

      我們現在通過實時資料分析資金流向,營運名額,更能與使用者建立緊密連接配接。

我們先後做了2個大屏一個與使用者互動,展示實時資料,一個分析投資情況提供基礎營運名額。

【MVP月度主題分享】通過dataV制作實時資料大屏

<b>項目實施</b>

一個互金公司拼的就是時間,做晚了基本就敗了,那麼如何快速實作上圖效果呢?今日教大家如何快速展示資料可視化。

首先進入熟悉的阿裡管理控制台,在大資料(數加)欄目找到DataV資料可視化,

如圖:

【MVP月度主題分享】通過dataV制作實時資料大屏

該産品一共有3種報價:

免費版

基礎版—51元/年

企業版—5100元/年

記住這裡不要猶豫,一定要選擇企業版,希望讀者永遠不要體會到為什麼。如果你實在掏不起,那麼我想你可以考慮找個投資平台(近在眼前)刷刷錢。

下面開始制作環節:

螢幕大小1000*496

【MVP月度主題分享】通過dataV制作實時資料大屏

<b>可視化樣式設定</b>

放置2D平面地圖,個人認為2D平面地圖是最實用的地圖空間。設定全局變量讓其顯示中國地區:

【MVP月度主題分享】通過dataV制作實時資料大屏

此時的地圖與設計稿差異甚大,那麼如何調整呢?所有地圖的差異化都是由子元件形成的,這裡沿用了3個子元件。

【MVP月度主題分享】通過dataV制作實時資料大屏

底圖層如果需要淺色調的話基本隻能選“高德電子地圖”瓦片。

右邊白色區域需要一個白色背景框,選中輔助圖形-&gt;自定義背景框,此時大家會發現,該框内部是透明的,被地圖覆寫住了,那麼如何調整控件件的覆寫關系呢?這裡有個類似PS圖層的功能

【MVP月度主題分享】通過dataV制作實時資料大屏

切換圖層位置後把背景色設定成#ffffff就是全白底層了。在底色中逐個添加文字-&gt;通用标題。其實這裡可以考慮用”輪播清單”,筆者認為如果不是非要突出滾動效果的話,輪播清單可自定義的空間不大。那麼問題來了,如何實作變量變顔色的通用标題呢?小編在這裡卡了一下,以為用三個标題就能拼湊,結果意識到,在動态長度的數值下無法改變字首的空間右對齊位置。

對于這種需求,完全可以直接使用名額-&gt;數字翻牌器,設定右對齊,#ee5b5a顔色字型,字首字尾即可。

最後發現,少了圖例,其實DataV的圖例自定義空間有點小,這裡使用名額-&gt;狀态卡片來代替。是以,能做出什麼樣的圖例就能做出什麼樣的地圖點,圖例的效果也限制了地圖點的發揮,因為總不能接受圖例和地圖點樣式差異過大是吧。

<b>連接配接資料源</b>

基礎的樣式做完,下面介紹下如何填充資料,基本上最常用的方式是API,資料庫,資料代理服務。

【MVP月度主題分享】通過dataV制作實時資料大屏
【MVP月度主題分享】通過dataV制作實時資料大屏

可以看到4個字段名,如果你資料庫表中字段一一對應的話select * 即可識别,如果有個别名稱有映射關系可以簡單修改下SQL如:SELECT money as value,prefix,suffix FROM datav_rolling where id=1。

提充後等待狀态顯示比對成功後,千萬别忘了勾選自動更新功能

【MVP月度主題分享】通過dataV制作實時資料大屏

把所有控件動态讀取資料的方式都配好後可以釋出并預覽,如圖:

【MVP月度主題分享】通過dataV制作實時資料大屏

整體架構基本完成,每一個控件都具備不少調參,可以逐漸細化自己的前端。

最後再分享一個内部資金名額的大屏圖例:

【MVP月度主題分享】通過dataV制作實時資料大屏