如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

傑華園發表於2020-11-20

給各位看一個新的視覺化圖表和大屏:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

今天教大家,如何巧妙利用圖表,快速做出場景化數字大屏!

FineReport作為報表界扛把子,必須安排到位!


如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

一、大屏主體類圖表

大屏主體類圖表通常作為整塊大屏的視覺中心,一般放在中間位置,呈現主要資訊或資訊展示的維度,而且通常帶有聯動、跳轉等動態效果。

1、場景類

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

場景切換地圖擁有遊戲級3D視覺效果,可以實現多場景(多地圖)切換。

應用:公司入口、展廳、會議室、領導辦公室大屏 

  • 有較高的視覺要求的大屏
  • 含有多個地理資訊維度的資料要展示
  • 需要自動輪播、點選鑽取或切換等互動操作

應用案例:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

2、地球類

(1)三維點地球可以直觀展示各個點的詳細資訊,不止於數值,還可以是文字

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

(2)三維柱形地球透過柱形直觀展示各個點的資料大小

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

(3)三維流向地球,利用流線生動地展示兩點之間的物流、交易等業務關係

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

應用:大屏要求酷炫風、科技感等視覺效果;有全球業務的資料需要展示

應用案例:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

3、地圖類

(1)輪播 GIS 點地圖

應用:多個地理資料點的資訊按點輪播;輪播聯動其它元件展示資訊。

效果如下圖所示:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

應用案例:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

(2)輪播三維組合地圖,點、線、柱形、區域四種資料型別的地圖輪播

應用:多個維度的地理資料點按輪播

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

應用案例:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

3、其他型別

(1)輪播目錄齒輪 ,將列表型的目錄視覺化為齒輪狀,輪播聯動各個維度的資料 

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

應用案例:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

(2)智慧樹,將多個維度的資料用樹體上的氣泡來代表,輪播氣泡聯動對應維度的資料,或跳轉對應頁面

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

應用:大屏既要求視覺效果,又要展示多個維度、多個指標資料

應用案例:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

二、大屏點綴類圖表

大屏點綴類圖表通常環繞在視覺中心周圍,起到畫龍點睛的作用,用來呈現次要資訊,但通常也是重點關注的指標。

1、儀表盤

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

(2)水球圖

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

2、指標卡類

(1)輪播KPI指標卡

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

(2)粒子計數器

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

3、時間類

時間齒輪

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

4、柱形圖類

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

三、場景化大屏開發步驟

介紹完了各個擴充套件圖表的特點和用法,下面帶著大家一起來實操一張場景地圖大屏demo,效果如下:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

整體步驟如下:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

1、確定主題

大屏是給誰看的?在什麼場景下展示,要展示哪些資訊?

  • 領導層,在公司展廳接待外賓,用來向嘉賓展示集團的全國銷售業務情況
  • 管理層,在辦公室,用大屏上的重要指標來支援日常決策
  • 業務組成員,在會議室開會,用大屏資料來支撐會議過程中的論點

2、抽取指標,確定圖表型別

搞清楚了大屏要展示的資訊,然後根據對應的業務場景抽取關鍵指標,再根據分析目標確定指標分析維度,這邊給一張圖表選擇指南:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

3、佈局排版

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

4、資料準備

開啟設計器的第一步就是資料準備,準備好我們要用的資料。

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

5、拖拽元件佈局

定義好資料集之後,下一步就是按照我們原先規劃好的排版佈局,將各個圖表元件拖拽到畫布上。

從圖表欄將各個部分的圖表元件拖拽到畫布上,調整好大小,並配置好資料連線:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

在元件拖放的過程中,給大家分享一個技巧,如果我們在一張大屏中需要用到多個同型別的元件塊,我們可以利用 元件複用功能,複製元件塊,再貼上,不需要反覆拖拽圖表元件、設定大小及配置,提高模板製作效率:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

6、配色調整

大家都是顏值動物嘛,所以好的設計風格是不一樣的,設計的方案也是千人千面。

自定義一個配色方案,命名為demo1,選擇預設配色方案為demo1,就可以將整張大屏的配色方案全部設定為demo1的配色:

如何做出酷炫且實用的視覺化大屏?Excel和PPT該淘汰了

7、細節點綴、調整

在大屏展現上,細節會極大地影響整體效果,需要透過適當給元素、標題、數字等新增一些諸如邊框、圖畫等在內的點綴效果,或者刪除一些不必要的元素,幫助提升整體美觀度。

大屏工具和圖表模板,都是FineReport.


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/21472864/viewspace-2735473/,如需轉載,請註明出處,否則將追究法律責任。

相關文章