大屏製作 | 完成一個美觀大屏到底多簡單？四步搞定！

作為一名大屏開發人員，雖然之前把大屏的準備工作都做好了，萬事俱備只欠製作，但是經常會“卡”在大屏製作上，花了很長時間都做不出令人滿意的大屏！

 

 

那如何才能輕鬆高效地製作出一張炫酷美觀的大屏呢？通過 Smartbi 大屏視覺化即可實現，今天小麥帶你一探究竟。

 

以“地產投資分析平臺”大屏為例，原本製作這樣的大屏往往需要耗費幾天的時間，現在我們只要花 1 小時進行元件複用和佈局，然後再用 1 小時左右去調整細節，製作一個炫酷美觀的大屏只需 2 小時就可以完全搞定！此外，大屏中包括的酷炫動態效果，無需寫任何程式碼，使用“元件模板 + 元件設定”功能即可輕鬆搞定。

 

 

下面，我們來看一下上述大屏的具體實現步驟：

 

壹 、 新增背景圖片

 

在主題 > 儀表盤 > 背景中上傳已經設計好的背景圖片，完成大屏背景的設定。

 

 

 

貳 、 新增元件

 

V10.5 版本內建豐富美觀的元件模板（詳細瞭解點這裡），因此，大屏中很多元件只需要從模板中直接複用再替換資料來源即可實現。

 

 

接下來，我們重點介紹大屏中是如何實現輪播地圖、動態餅圖、表格滾動等功能：

 

1 、 輪播地圖

 

輪播地圖包括專案個數、結算利潤、可售區域貨值三個頁籤，這三個頁籤擁有相同型別和樣式的元件組合，但是這三個頁籤需要展示的資料並不相同。

 

l 首先，我們拖拽頁籤元件到對應的區域，並設定上述三個頁籤。

 

l 然後，我們製作【專案個數】頁籤內容。我們開啟模板資源，分別選擇合適的地圖模板、橫條圖模板和指標卡模板，複製貼上至對應區域，並設定【專案個數】頁籤繫結這些元件模板。

 

 

 

l 接著，通過“替換資料來源”功能快速把元件模板的資料一鍵替換成新的資料來源。

 

 

 

l 最後，我們選中【專案個數】頁籤的 3 個元件，快速複製到【結算利潤】【可售區域貨值】頁籤中，替換資料指標，並繫結到對應頁籤即可。

 

 

2 、 環形進度圖

 

除了通過上述複製貼上的方式實現元件模板複用，我們還能通過拖拽的方式來實現該。點選【元件】→【資源】，選擇模板資源中對應的環形進度圖，拖拽到編輯介面，然後同樣替換資料來源即可。

 

 

 

3 、 表格滾動

 

表格滾動效果通常用於解決表格資料顯示不全的問題， Smartbi 大屏視覺化支援直接設定表格滾動效果。如下圖，我們新增表格元件並關聯資料後，直接通過元件設定開啟滾動效果即可。

 

 

叄 、 精準佈局

 

底圖裡已經提前設定好各個元件的位置，大屏視覺化支援按照底圖要求自定義設定元件畫素，並支援對多個元件快速設定對齊和佈局的方式，同時提供了多種佈局的小工具，如自定義參考線、 PPT 式智慧參考線等，幫助開發人員在大屏製作中能精準排版、快速佈局。同時我們還支援鷹眼功能，讓開發人員隨時擁有全域性視角。

 

 

 

肆 、 細節調整

 

大屏整體設計完成後，不可避免地需要進行一些細節的調整，除了常規的字型顏色、大小、對齊以外，還有一些元件屬性的細節調整。

 

從以上示例的製作過程來看，使用 Smartbi 大屏視覺化來進行大屏製作，原本需要較長時間才能完成的大屏，現在僅需幾個小時即可搞定，效率確實大大提升，而且全程無程式碼，輕鬆搞定，堪稱視覺化大屏製作利器！