今天教大家,如何巧妙利用圖表,快速做出場景化數字大屏!
FineReport作為報表界扛把子,必須安排到位!
一、大屏主體類圖表
大屏主體類圖表通常作為整塊大屏的視覺中心,一般放在中間位置,呈現主要資訊或資訊展示的維度,而且通常帶有聯動、跳轉等動態效果。
1、場景類
場景切換地圖擁有遊戲級3D視覺效果,可以實現多場景(多地圖)切換。
應用:公司入口、展廳、會議室、領導辦公室大屏
- 有較高的視覺要求的大屏
- 含有多個地理資訊維度的資料要展示
- 需要自動輪播、點選鑽取或切換等互動操作
應用案例:
2、地球類
(1)三維點地球可以直觀展示各個點的詳細資訊,不止於數值,還可以是文字
(2)三維柱形地球透過柱形直觀展示各個點的資料大小
(3)三維流向地球,利用流線生動地展示兩點之間的物流、交易等業務關係
應用:大屏要求酷炫風、科技感等視覺效果;有全球業務的資料需要展示
應用案例:
3、地圖類
(1)輪播 GIS 點地圖
應用:多個地理資料點的資訊按點輪播;輪播聯動其它元件展示資訊。
效果如下圖所示:
應用案例:
(2)輪播三維組合地圖,點、線、柱形、區域四種資料型別的地圖輪播
應用:多個維度的地理資料點按輪播
應用案例:
3、其他型別
(1)輪播目錄齒輪 ,將列表型的目錄視覺化為齒輪狀,輪播聯動各個維度的資料
應用案例:
(2)智慧樹,將多個維度的資料用樹體上的氣泡來代表,輪播氣泡聯動對應維度的資料,或跳轉對應頁面
應用:大屏既要求視覺效果,又要展示多個維度、多個指標資料
應用案例:
二、大屏點綴類圖表
大屏點綴類圖表通常環繞在視覺中心周圍,起到畫龍點睛的作用,用來呈現次要資訊,但通常也是重點關注的指標。
1、儀表盤
(2)水球圖
2、指標卡類
(1)輪播KPI指標卡
(2)粒子計數器
3、時間類
時間齒輪
4、柱形圖類
三、場景化大屏開發步驟
介紹完了各個擴充套件圖表的特點和用法,下面帶著大家一起來實操一張場景地圖大屏demo,效果如下:
整體步驟如下:
1、確定主題
大屏是給誰看的?在什麼場景下展示,要展示哪些資訊?
- 領導層,在公司展廳接待外賓,用來向嘉賓展示集團的全國銷售業務情況
- 管理層,在辦公室,用大屏上的重要指標來支援日常決策
- 業務組成員,在會議室開會,用大屏資料來支撐會議過程中的論點
2、抽取指標,確定圖表型別
搞清楚了大屏要展示的資訊,然後根據對應的業務場景抽取關鍵指標,再根據分析目標確定指標分析維度,這邊給一張圖表選擇指南:
3、佈局排版
4、資料準備
開啟設計器的第一步就是資料準備,準備好我們要用的資料。
5、拖拽元件佈局
定義好資料集之後,下一步就是按照我們原先規劃好的排版佈局,將各個圖表元件拖拽到畫布上。
從圖表欄將各個部分的圖表元件拖拽到畫布上,調整好大小,並配置好資料連線:
在元件拖放的過程中,給大家分享一個技巧,如果我們在一張大屏中需要用到多個同型別的元件塊,我們可以利用 元件複用功能,複製元件塊,再貼上,不需要反覆拖拽圖表元件、設定大小及配置,提高模板製作效率:
6、配色調整
大家都是顏值動物嘛,所以好的設計風格是不一樣的,設計的方案也是千人千面。
自定義一個配色方案,命名為demo1,選擇預設配色方案為demo1,就可以將整張大屏的配色方案全部設定為demo1的配色:
7、細節點綴、調整
在大屏展現上,細節會極大地影響整體效果,需要透過適當給元素、標題、數字等新增一些諸如邊框、圖畫等在內的點綴效果,或者刪除一些不必要的元素,幫助提升整體美觀度。
大屏工具和圖表模板,都是FineReport.