企業級數據大屏設計如何實現，div+html+echarts

大屏是什麼?
大屏設計是最近比較流行的概念，一般按照功能來分有幾種：

1. 可交互的觸摸屏，大多運用在互動教學課程或者報告演示現場，用戶可結合交互操作來闡述具體內容。設計師需要對交互形式和傳達內容作統一思考設計。

2. 爲某些特定的大型活動設計的專屬大屏，比如說產品發佈會、雙11購物狂歡節。這類大屏需要結合音樂、場景、動效、燈光等多方面元素統一烘托，最終效果酷炫震撼，所有展現的內容都是定製化設計和開發的。

3.專爲企業提供服務的可視化數據大屏，這一類大屏在商業中有其應用價值，它的特性是數據展示能力強，用一些較爲常見的圖表，如柱狀圖、餅圖等來展現業務情況，使客戶快速讀懂數據背後的含義。
![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20201030145648908.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1bWVuZ2h1YV9jb20x,size_16,co
數據大屏爲客戶提供了政務、電商、客服、安全、金融等多個應用場景。

數據大屏和數據報告的區別是什麼？

先來看一下業務場景中的報告和大屏是如何展現的：


1.用戶

數據報告的用戶一般是數據分析師，分析師製作完報告，會把結果反饋給業務人員或者公司高層，爲決策提供參考。而大屏的用戶會更廣，整個企業內的有關人員甚至所有員工都能夠看大屏。

2.交互

一份完整的報告一般包括詳細的分析過程，用戶無法在不交互的情況下了解完整數據，比如說篩選、鑽取、查看詳情等等，都是很常用的分析功能。而大屏依靠視覺、動效，來傳遞有效信息，用戶並不需要交互即可直觀迅速瞭解內容。

3.時間

報告偏向展示一段時間內的數據，某些企業甚至能通過報告的日期篩選查詢到從接入系統開始所有的歷史數據。大屏更多起到的是監測職能，反饋的是實時信息，顯示的是當下的數據。

4.展示

報告的閱讀場景決定了它展示的側重點在「精確」和「完整」，要達到這兩點，不可避免有時候會犧牲一些視覺表現。例如：數據項過多的情況下，視覺感受比較擁擠。

對於大屏來說，即使只有當下的數據，用戶也很難在短時間內get到關鍵，所以重要的是如何在有限的時間內傳遞出有效信息，即如何迅速提煉出重點數據並展示，即使這樣會犧牲數據的完整性。

如果用一句話總結數據大屏的設計的關鍵：重點突出大於面面俱到。

大屏產生的過程
大部分人制作大屏的方式，只是一種圖表的堆砌，先把需要的單個圖表做完，然後簡單地羅列組合在一起，最後改變一下整體顏色，就完成了。整個過程雖然不能說錯，但並沒有把大屏的優勢發揮出來。一個完整的大屏設計過程應該包括以下步驟：

首先，我們要對數據進行分析，得出自己的結論。同樣一份數據，因爲不同的角度和思考方式，可能得出的觀點很不一樣。例如同樣都是關於銷售額的數據，有人希望知道各地銷售額對比，有人希望瞭解銷售額排名前五的商品類型，拿來數據就畫圖會讓設計顯得雜亂無章，讀者也不知道要讀什麼數據。

所以在大屏設計之前，需要先和客戶確認他們想要傳達給目標用戶的重點，這個重點是他們希望用戶在讀完這個大屏之後能夠理解並記住的主要信息，很多公司都錯誤的認爲，把多個數據塞進一個大屏中可以幫助提高公司的專業度，實際上這隻能顯示他們有很多數據。

爲什麼重點這麼重要，試想一下，看大屏的人可能只會駐足在屏幕前一分鐘，他們和大屏僅有的互動就是快速掃過整張圖，在這一分鐘內，到底能記住多少信息？設計師在每個設計環節都要牢牢記住這一點。

可以嘗試着問客戶兩個問題：

（1）如果整個大屏只能展示一個最重要的信息，你希望是什麼？

（2）你希望展現這些信息的理由是什麼？通過客戶的回答，你能瞭解他希望用戶的關注點在哪裏，從而提煉出設計重點。如果只有一個重點，放在最顯眼的位置，如果有幾個重點，儘量集中放置，吸引視覺焦點。

沒有什麼比加粗高亮數字更簡單直接，保險大屏想傳遞的重心在於

（1）保費總額 。

（2）各地貢獻的保費情況。

網絡安全大屏，首先讓用戶通過直接的數字感知總體安全情況，其次詳細查看當前攻擊發生的源頭和目的地。

整個客戶銷售服務的場景中，員工們是非常忙碌的，可能只有偶爾休息的間隙查看一下實時的服務情況，最希望傳達給客服的信息集中設計在左半屏，

（1）呼叫量。

（2）滿意度。其他信息的優先級相對較低。

明確需要表達的信息和主題後，需要根據這個信息的數據關係，決定選擇何種圖表類型，以及要對圖表作何種特別處理。

圖表種類各式各樣，有些圖表很難界定是屬於哪種關係，我見過講圖表關係和圖表功能比較好的平臺是Ant v的墨者學院，有興趣的小夥伴可以瞭解一下。

Ant v把數據關係分成了9個大類，當你確定了某個數據關係類型後，就可以根據該數據的使用場景查找出相對應的圖表和使用建議，並在其中進行選擇。

以一份購物城數據爲例：

當確定了要使用哪些圖表做圖後，開始進入製作流程，影響最終圖表展現效果的元素一般分爲兩個層面：

非數據層：

不受數據影響樣式的元素，比如說背景、網格線、外邊框等等。這類元素起到的是輔助閱讀作用，但如果不加處理全部放出，視覺上會顯得雜亂和不夠簡潔，干擾到你真正想展示的信息。對於這類元素，應該儘量隱藏和弱化。

隱藏

· 去除不必要的背景填充

· 去掉無意義的顏色變化

· 去掉不必要的外框

弱化

· 座標軸淡色或隱藏

· 網格線淡色或隱藏

數據層：

受數據影響樣式的元素，比如說柱狀圖的柱條長度，柱條顏色，柱條展示個數，氣泡圖氣泡大小等等，這類元素的展示效果和圖表本身的數據息息相關，一旦圖表本身的數據比較極端，有可能會使得最終視覺展現不盡如人意，我們無法改變具體的數據，是否就完全無法操控這些元素了呢？

這裏挑選了幾個大屏中應用較多的圖表，總結了其數據層樣式的調整方式。

調整範圍

· 截斷超大值

當某一個值特別大時，繪製出的條形遠遠長於其他類別，導致其他條形被壓縮，不便於比較。某條特別長，也可能會影響到整個大屏的排版平衡，可以採用截斷選項的方式。

數據可以不從0開始

很多數據可視化工具裏都有「數軸是否包括零」這一個選項，用戶可通過這個功能來控制座標軸的顯示範圍，例如下圖，折線的波動範圍比較小，走勢起伏不明顯，這時可以選擇數據不從零開始，清晰地看出了折線的走勢情況。當然，如果在平時的數據報告中，這樣顯示有誇大差異的嫌疑，不建議頻繁使用。

避免重疊

· 避免負值被遮蓋

當一些數值有負數時，標籤和柱條離得較遠，不便於閱讀，如果標籤緊貼柱條，又會發生重疊，比較好的方式是標籤根據柱條的方向分別顯示在座標軸的兩側。

軸標籤太長可橫向放置

當軸標籤太長時，雖然斜放可以避免重疊，但歪着頭查看內容在瀏覽大屏的場景下對用戶不是很友好，可以考慮把柱條橫向放置，把標籤置於柱條空隙之間。
![總結

如果要對大屏設計的特點作一個總結：全屏時突出重點圖表，單表時突出重點數據。把握好這點，至少可以避過大部分的坑。但一個高水準的大屏，還少不了一些細節的把控。比如：

1. 大屏風格是否符合業務主題，是熱烈？是專業？是冷靜？

2. 是否需要一些個性化的控件：例如時間器、輪播歡迎語等。

3. 是針對固定屏的定製化開發，還是考慮延展性的模塊縱橫柵格佈局，對不同屏的適配是如何？

4. 現場投放大屏後，內容是否方便閱讀，動效是否符合預期，色差是是否需要調整等等。

大屏是我們用來分享、溝通、傳播信息的有效途徑之一。它將會進化成一種新的媒體形式，在品牌推廣、政務接待、商業溝通、數據監控等各個場景發揮重要作用。本文主要整理了一些大屏設計過程中的方法和原則，希望能夠爲大家提供一些借鑑思路。