今年視覺化大屏又被大家推上了熱搜，什麼500強企業分析大屏、指揮中心大屏、大屏視覺化分析等，處處都有著大屏視覺化分析的背景。

那我們作為一名普通人，在沒有天貓雙十一發佈會那種財力下，也沒有程式設計師的開發能力，我們能自己創作出一款大屏嗎？

答案當然是肯定的！！

這樣的大屏不僅擁有著高階的科技感，而且都是經過了多次的版面設計和修改，這次大屏效果在同行業內部交流過程中反響不錯。下面我就給大家介紹一下用FineReport這款個人免費軟體，是如何做出屬於自己的大屏的。

首先，來看一下業內各個行業的大屏demo和實景。

大屏視覺化行業demo

企業銷售部業績公示大屏

金融類雙11資料演示

國際業務的雙11資料演示

國內雙11物流資料演示

綜合類雙11作戰指揮室

工程部設計規劃指揮中心

大屏視覺化現場案例

（實際案例，出於保密，部分內容已做模糊處理，大家將就著看哈，現場動態效果比單純看照片震撼很多！）

大屏視覺化製作流程

下面我們就來介紹一下大屏具體是如何製作的。

1、工欲善其事比先利其器

第一步我們得先安裝FineReport，免費獲取大屏啟用碼並安裝。

PS：偷偷告訴你，這是一款個人使用者可以免費使用的神器，當然了，Finereport的定位還是企業版web報表工具。

2、磨刀不誤砍柴功

先建一個空白大屏模板（決策報表），如下所示。

接下來，我們要思考一下，在這個空白介面上，我們的大屏需要怎樣的佈局？有如下幾種常見的佈局體系

以上是幾種常見的大屏排布方式，一句各個大屏模板所需要展示的具體資訊我們可以自行選擇，需要注意的點就是需要有重點資訊，有輔助資訊，重點資訊重點展示，輔助資訊用來輔描述重點資訊。

3、選擇合適的視覺化元素

FineReport內建了數十種視覺化元素，不同型別的圖表，可以表達的含義不同，樣式構思完畢之後 ，就需要考慮在帆軟眾多的圖表庫中挑選合適的圖表來展示相應的資訊了。

4、多樣化的炫酷外掛

輪播GIS點地圖

輪播目標齒輪

時間齒輪

輪播夜光儀表盤

5、添磚加瓦，細節雕琢

上一步我們把大致的框架搭好啦，但是總覺得不那麼好看？為什麼呢？因為我們缺幾樣東西。一個是主心骨（總領全域性的突出指標），一個是配色。

所以，我們先來給加一個全域性指標，也就是我們關注的銷售總額資料，從快捷欄中拖入一個表格元件，並在表格中繫結銷售額資料。

可以瀏覽一下效果，是不是瞬間覺得整個頁面有了主心骨呢？

緊接著，我們開始對配色進行調整。這個時候，如果你懂一些美工方面的知識，或者說公司有專門的美工同學，那就事半功倍啦，照著美工出具的效果調整就行。

那沒有美工怎麼辦呢？

6、持續迭代，精益求精

到上一步，我們搭出的demo基本可以看了，但頂多也是差強人意，離優秀還是有一些距離的，我們可以透過更多的技巧來繼續最佳化。

比如為頁面新增一些合適的圖片背景或者邊框元素，比如設定圖表的動畫效果，比如設定監控重新整理來實時更新資料等等。

下圖GIF是我們給地圖添加了資料監控及自動資料提示，會根據後臺資料變更情況實時在頁面上展示。

其實大屏的設計一方面需要不斷積累經驗，另一方面也需要善用大屏工具，一個好的視覺化工具能夠讓你做起大屏來得心應手，像我這一次用的FineReport就完全沒有涉及程式設計，換成是資料小白也一樣能夠做出高階大氣的大屏。

就工具而言，資料大屏可以用Excel、JS開發、報表工具、BI工具等來實現。但對於實時更新、資料量支撐、後臺響應，平臺運維等需求，效能卻各有差異。

今天，我們想以一種更快更簡單，甚至接近於“傻瓜式”的方法來教大家制作大屏，透過自助BI工具，類似於Tableau、PowerBI。

工具：FineBI

這裡以銷售管理駕駛艙為例，介紹一個完整的管理駕駛艙搭建例項，手把手教你搭建視覺化大屏。以下跳過了資料準備和資料清洗的步驟，直接從大屏的設計上手。

構建資料模型

我們先從底層資料處理入手，構建資料模型。

像這類大業務分析一般要用到多張維度表和事實明細表的資料（例如下圖中的分公司維度表和合同事實表）。常規操作是將不同業務系統的sql表拼接、寬表拼接，構成一個星型資料模型，需要你有專業的資料倉庫技能。那這裡化繁為簡，可以直接用工具自帶的敏捷資料模型去替代上述的工作，原理是自動構建雪花型模型，跨資料來源關聯。（雪花型擁有靈活、可複用性高等諸多優勢，這裡就不多贅述了）。

搭建好上圖的銷售demo業務包的資料表和關聯模型之後，下一步就可以進行正式的銷售管理駕駛艙大屏搭建。

大屏佈局設計

在給大家介紹具體制作過程之前先講解一下通常管理駕駛艙的佈局方式。管理駕駛艙往往展現的是一個企業全域性的業務，一般分為主要指標和次要指標兩個層次，主要指標反映核心業務，次要指標用於進一步闡述分析。所以在製作時給予不一樣的側重，這裡推薦幾種常見的版式。

上面幾個版式不是金科定律，只是通常推薦的主次分佈版式，能讓資訊一目瞭然。實際專案中，不一定使用主次分佈，也可以使用平均分佈，或者可以二者結合進行適當調整。比如下圖所示，指標很多很多，存在多個層級的，就根據上面所說的基本原則進行一些微調，效果會很好。

實際分析製作過程

有了以上的佈局設計，每一個模組就單獨用一類圖表分析一塊內容，比如銷售分佈、簽單分佈、回款金額分析......整體呈現一個主題（在這裡是銷售業務）的分析。

那具體如何用工具操作呢？

首先，既然是管理中心駕駛艙，那麼我們可以先從領導和高層最為關注的公司簽單金額和回款金額入手。對於這樣的彙總指標，選擇儀表板進行資料展示再合適不過了。

選擇拖入合同事實表中的合同金額和合同回款表中的回款金額兩個指標，樣式這裡選擇圓環儀表盤，同時兩個指標的單位都設定成億，最大刻度輸入當前合同金額，2.78億。這樣一來，2.78億的合同回款，2.25億的回款金額以及80.87%的總的回款率也就統計出來了,企業的簽單金額和回款金額/回款率都一目瞭然，這裡的元件標題可以隱藏掉。

其次由於客戶遍佈全國，想知道各地區的銷售額情況，對應的銷售團隊情況。可以用資料地圖來展示銷售額分佈。

這裡我們拉一個地圖元件，然後把分公司資訊表中的省份和合同資訊表中的合同金額兩個欄位分別拖拽過來進行資料統計，合同金額的單位設定為萬，圖例設定居右，隱藏元件標題，這樣全國各省份的銷售合同分佈情況透過地圖得到了充分的展示。

通常領導和高層一般都比較關注公司每年的合同和匯款情況統計走勢，這裡可以選擇折線圖進行隨時間變化的資料趨勢分析展現。分類軸放入合同資訊表中的簽約年份欄位，左值軸放入需要統計的合同金額和回款金額，同時我們可能希望還能看到每一年下面對應的月份的合同回款情況，在FineBI中只需要把簽單月份放到分類軸之後，取消掉勾選顯示即可實現從年份鑽取到每個月份的功能。單位這邊可以根據具體數量級選擇，這裡我們選擇百萬，同時隱藏掉網格線，元件命名為“年度簽單&&回款統計”。

很多公司財務統計是根據每年的季度進行計算的，這裡我們再統計一下每年中每個季度的簽單情況。元件選擇堆積面積圖，然後分類選擇簽約年份，系列選擇季度，左值軸選擇合同金額，樣式設定中把單位修改為百萬，同時隱藏掉網格線，元件命名為“季度簽單堆積面積圖”。

除了時間維度之外，因為有分公司，所以我們還可以更加直觀的統計每個分公司以及每個客戶經理對應的合同回款情況。首先在分類軸中放入省份、客戶經理欄位，客戶經理欄位取消勾選以實現能夠鑽取到每個省份下去檢視對應的客戶經理的回款情況。左值軸選擇合同金額、回款金額，在右值軸中新增計算指標為“回款金額/合同金額”，回款率的圖表型別選擇折線圖。樣式設定中，左指軸設定為萬，右值軸設定為百分比，圖例居右，隱藏網格線，元件命名為“各地區簽單回款情況統計。”

那在銷售簽單統計中我們往往可能會比較關心回款金額前十名和後十名分別是哪些人，以及這些人的簽單金額分別又是多少，對於銷售靠前的經理人可進行銷售經驗分享，對於銷售業績落後的經理人及時督促。

我們先來做回款前十名的銷售分析，選擇對比條形圖，分類區域拖拽客戶經理欄位，值軸1選擇合同金額，值軸2選擇回款金額，然後對客戶經理進行過濾，選擇回款金額前N個，輸入10確定即可。樣式設定中我們把單位設定成萬，隱藏網格線，元件命名為“銷售回款前十名”。下面再來做回款後十名的銷售分析，這裡我們只需要複製“銷售回款前十名”即可，然後重新命名為“銷售回款後十名”，進入詳細設定介面，將對客戶經理的原先的過濾條件修改為匯款金額的後N個，輸入10即可。

再後面我們可能需要檢視簽單以及回款的明細資料，以進行每筆訂單的詳細資料檢視。先選擇明細表，依次拖入銷售區域、客戶經理、客戶名稱、合同簽約時間、合同金額、回款金額。這裡我們可以再新增一個“回款率”計算指標為“回款金額/合同金額”。對於回款率指標，修改數量級單位為百分比，同時我們可以做一個樣式預警標識，對於回款率低於50%的的資料進行紅色標記，大於50%的資料進行綠色標記。

最後加上文字元件作為儀表板的標題，調節文字加粗、設定文字顏色，字型大小選擇32號，背景設定透明，局樣式中選擇樣式三，設定元件背景為透明，同時對於標題的兩側新增背景圖片邊框，以增加駕駛艙細節處的細節感官。

透過這樣的一個銷售管理駕駛艙資料分析看板，領導和決策層想要看的相關企業銷售資料都一覽無餘，整個流程下來，如果熟悉資料和分析思路的話，不超過30分鐘，大家是不是很期待想嘗試下呢？

要想做出一張佈局合理又好看的大屏視覺化分析報表，不僅需要合理選用大屏佈局樣式，同時還需要掌握圖片、顏色等個性化設定。本期奧威BI的大屏製作講師是奧威BI資料視覺化分析軟體團隊中，大屏製作經驗豐富的資深大屏設計師，有大屏製作需要的朋友可千萬別錯過了。

文章太長不看？看影片吧！

課程重點查漏補缺？看下文：

首先，確定大屏資料視覺化分析報表的排版方式。我們總結了以下幾款大屏排版樣式，大家可以參考一下：

其次，需要確定大屏資料視覺化分析報表的顏色搭配，是要配合公司logo、官網顏色基調進行設計，還是使用常規的顏色搭配，以及考慮如何進行打大屏資料可視分析報表的裝飾，既能凸顯報表重點又完美與公司官網基調等融合。

大屏資料視覺化分析報表設定

（1）地圖背景

選中報表中的百度地圖—右側“專有”—地圖風格，背景風格（自選）

（2）容器背景

選中圖表外的容器—右側“容器”—容器背景，背景設定（點圖片，並上傳事先準備好的素材圖片）—背景圖片自適應

（3）報表標題背景

步驟同上

（4）柱形圖

圖表標題：右側“標題”—公共標題—標題高度（自定義）—標題浮動

圖表顏色：方法a，右側“圖表”—調色盤（自定義）；方法b，右側“序列”—序列（自選），圖形設定下自選顏色。

（5）折線圖

折線圖上的點：右側“序列”—折線圖設計下自定義其形狀、大小等。

（6）容器內的圖表邊框

右側“容器”—點容器邊框旁的小圖示—自定義顏色、選中橫線並確定大小。效果如下圖：

（7）柱形圖的漸變預警顏色

以上就是本期的全部內容，更多BI智慧資料視覺化分析的相關內容請持續關注奧威BI小課堂。每週四下午2:00準點開課！

其他答主說的都是大屏模板製作層面的，但在實際工作中，一個大屏專案往往不止demo開發這麼簡單，從前期的需求調研到模板開發，再到最終的除錯上線，整個專案的過程是非常複雜的，耗時也很長。下面講講我們在實際過程中開發一張大屏的流程：

1、需求調研

製作視覺化大屏的最終目標是都是為了複製業務指標的監控和分析，所以大屏的內容應該是服務於業務的，因此在模板製作之前要充分調研大屏使用者的需求，搞清楚大屏受眾是誰，他們想要透過大屏瞭解什麼資訊。

業務需求是最重要的部分，主要是根據管理駕駛艙的展示場景，抽取關鍵指標。根據業務場景抽取關鍵指標。分析我之前整理過的財務分析指標體系給大家參考：

財務分析指標

財務管理指標

確定要展示的指標之後，根據指標的分析緯度和要表達的資料關係確定圖表展示型別，關於圖表型別的選擇大家可以參考這篇：收下這份視覺化圖表應用指南，再也不會用錯圖表

有硬體大屏展示需要的要對硬體裝置的效能和資料進行調研，這個我就不多講了

資料質量調研：

2、模板原型製作

如果對大屏的視覺效果要求比較高，可以找視覺設計一下大屏整體視覺效果，然後對著視覺模板進行開發

模板開發有多種方式選擇，可以用Excel、JS開發、報表工具、BI工具等來實現。一般用得比較多的就是JS+Echarts，Echarts的圖表很豐富，而且互動效果很好，用來做定製開發是不錯的選擇。

不過這種開發方式對開發人員的技術水平很高，維護成本也很大，需求一變動就要改程式碼，如果涉及的資料量大，動態效果多的話，效能會大打折扣。而且最終的模板投放到led螢幕上，除錯起來也相當麻煩，如果沒有足夠的技術水平和能力，不要輕易嘗試。

另外的選擇就是視覺化開發軟體，比如帆軟的FineReport、FineBI、阿里的dataV、tableau等等。如果你是財務人員，推薦用BI工具，對業務人員來說，上手比較容易，門檻低，拖拖拽拽就能製作漂亮的視覺化分析圖表：

具體的實操和分析案例可以看這篇：乾貨分享！不寫函式和程式碼，教你搞定高大上的財務分析

在大資料以及資訊化浪潮的推動下，現如今各大企業紛紛加入資料視覺化行業，打造“智慧資料”時代。

財務部門，一個掌握了企業的經濟命脈的部門，是企業數一數二重要的部門。財務關係著企業的運營和發展，一個企業要想發展得更好，絕不能忽視財務，因此，在企業視覺化的發展過程中，絕不能忽略財務的視覺化發展。

1、背景

在日常運營中，企業每天都會產生各種財務資料，多而複雜，傳統的手工報表形式無法滿足企業快速發展的需求，股企業急於尋求改變。

2、現狀

資料零散，不統一無規則，收集資料的工作量大，無法快速對財務資料進行分析展示資料全部手工製作成報表，展示不夠直觀，無法滿足領導易懂、美觀的要求

因此，建設一套財務視覺化體系，勢在必行。

3、目標

財務視覺化體系，需要建立在全面收集財務資料的基礎上，且要求資料統一，故在建設視覺化體系過程中，也規整了企業的財務資料針對不同方面，建立專項的財務視覺化大屏，大屏中採用合適的圖表展示關鍵性指標常用財務圖表固定化，設定大屏資料更新頻率

4、成果

以財務總體情況、財務專項能力、財務核算能力為主題，分別建立不同的視覺化大屏。

財務總覽視覺化大屏

財務專項能力視覺化大屏

財務核算能力視覺化大屏

相較於傳統的表格報表，視覺化大屏展現的財務資訊更加直觀清晰，能夠更快速高效地為領導管理層提供決策依據。

你需要兩款工具協助，就能完美實現

1.財務軟體支援資料視覺化

估計現在大部分的財務軟體都支援資料視覺化，如果你的不支援，那就得另外想辦法了，我感覺可能需要匯出資料，用其他軟體來實現資料視覺化。

2.資料投放大螢幕工具

所謂投放大螢幕就簡單了，電腦外接的投影儀，大螢幕就完事了。

當然是要來用我們的資料視覺化EasyV平臺了呀！！！你們還在等什麼！！！

我先給大家看看兩個財務相關的大屏案例，保證讓你覺得炫酷又實用！！！

方案思路

袋鼠雲設計師選擇了黑色和金色為主色調，符合銀行的形象。針對銀行的需求，主要設計了資料總覽、財務情況、風險詳情、渠道分析、使用者畫像這五大主題，覆蓋銀行現有的業務需要。在物件為“人”的主題，大屏主檢視為人像影象，而在需要宏觀監控時，大屏主檢視則為地圖圖形。透過使用者資料的分析,可對使用者消費行為與特徵進行精準的跟蹤與分析,透過對銀行運營資料進行實時監測,能夠顯著增強管理執行效率和管理掌控。

*總覽：主屏為中國地圖，顯示全國放款情況，包括各類放款、授信、還款資料和實時放款資料，螢幕左側為各省市放款情況。

*財務情況：主屏顯示銀行餘額，左屏展示信貸資產趨勢、資產分類、普惠金融資料，右屏顯示銀行淨利潤、授信情況。

*風險詳情：主屏顯示每個拒絕事件的詳細資訊、累計拒絕數量，右屏展示拒絕原因排行和使用者拒絕趨勢。

*渠道分析：主屏展示總放款資料、不同渠道的放款情況和佔比、實時放款趨勢，右屏展示渠道授信情況、渠道借款申請情況。

*使用者畫像：主屏展示使用者的基礎資訊，包括學歷、性別、年齡、收入等，右屏展示使用者評分和使用者標籤。

專案價值

在對銀行的資料進行資料視覺化後，銀行能夠顯著增強業務執行的掌控，並有據可查的制定更加科學的執行策略。同時銀行可以透過資料視覺化大屏，更精準地把握使用者消費行為與特徵、金融風險，進一步完善了對銀行使用者的精準營銷與原有運營體系，有助於為其客戶帶來更加優質的服務和更好地管理銀行各項業務，幫助銀行全方位的提升運營及管理能力。

No.2 某高校財務系統大屏專案背景

《國家教育事業發展“十三五”規劃》，提出堅持改革創新，要不斷深化教育綜合改革，透過改革創新和對外開放解決難題、激發活力、推動發展。浙江大學攜手袋鼠雲開始智慧校園教育建設，從資訊化向數字化，智慧化轉型。袋鼠雲開始進行智慧校園資料中臺的建設，併為浙江大學完成了一系列“浙大智慧校園”多場景資料視覺化大屏。

方案思路

以需求為驅動，打通全業務、全終端、多形態的全域資料，匯聚到大資料平臺，藉助資料視覺化工具EasyV能夠靈活接入相關業務系統。保持色調風格統一，針對某一學院或部門需求針對某一主題設計資料視覺化大屏，設計浙大線上教育、科研數字大腦、行政辦事服務、財務系統、釘釘應用資料等多個場景。

*財務大屏

財務大屏：分為財力透視、收支情況、財務系統三大模組，透過資料視覺化大屏代替傳統的財務紙質彙報，更直觀、清晰地展示資料，幫助管理者發現數據背後的規律、輔助決策。

專案價值

利用視覺化技術，促進教育公平，科學決策、精準管理、智慧服務、輿情分析等全面數字化解決學校業務系統的孤島和資料管理的割裂。提升學校業務資料的一致性和全面性；提高學校業務部門資料多維分析統一，實現資料在校相關業務和組織層級之間的有效整合與互動。

EasyV®資料視覺化應用平臺使用者透過EasyV可以更高效的實現資料視覺化場景產品內有豐富的模版可以滿足85%視覺化場景需求海量的元件，樣式精美，“拖拉拽”即可使用數字時代，EasyV支援多種不同的資料來源接入，數字呈現不在有壁壘截至目前已經服務1000+客戶，建立3000+數字視覺化大屏致力於幫助企業更好的在數字時代實現資料價值讓資料價值看得見

接下來我給大家展現展現我們EasyV的基礎操作介面和操作邏輯～

EasyV簡單介面加上易上手的特性，讓資料視覺化變得異常簡單～

圖層：所新增的元件都會在此顯示。

元件：有各型別元件，如圖表、文字、地圖等。

編輯：右側為編輯欄，樣式，資料，互動。樣式：可進行常規的元件樣式更改；資料：可進行元件內容修改，如數值、文字等；互動：進行元件之間的互動設定。

1. 專案模板

EasyV內建多種不同的場景模版，可以直接生成視覺化大屏。

*透過EasyV建立模版

2. 建立頁面

3. 元件新增

*頁面上方工具欄，可以新增想要的元件

4.基礎內容的修改

*基礎內容修改

5.超多大屏模板素材

應用場景

（1）指揮/監控：業務監控、經營分析。

（2）工作彙報：工作流程、成果彙報。

（3）企業形象：能力展示、企業宣傳。

WECHAT:EasyV視覺化實驗室

人人都是產品經理：資料視覺化那些事

DTSTACK EASYV LAB.ALL RIGHTS RESERVED