大屏報表如何製作

2021-08-28 11:27:54 字數 2137 閱讀 3854

在目前的大資料趨勢中,資料的大屏視覺化成為大家所推崇的一種互動展示模式。如果我們能夠早一些了解和掌握這方面的技術,相信對我們的未來將會非常有幫助!

我們知道,通過報表工具實現大屏展示可以通過單張報表、多張報表 dashboard 布局或者多張報表頁面布局等方式實現,那麼,如何能設計出優秀的 dashboard 呢?

下面是國外的著名的視覺化專家 stephen few 在 2012 年舉辦的 dashboard 圖表設計競賽中列出的關於優秀的 dashboard 應該具有的特徵:

根據上面的評分標準,你所做的大屏資料視覺化圖表及格了嗎?

對於 dashboard 來說,如果需要完美的展現效果,是需要技術人員,ui 設計人員,以及業務人員協調工作完成的。而作為程式開發人員,如何在沒有美工的情況下,做出能上得了檯面的 dashboard 效果呢?

上面的標準說得比較概括,下面介紹一下我使用報表工具實際做 dashboard 時所考慮的具體因素:

1. 確定使用人群

了解使用人群,有助於把握好要顯示的 kpi 以及資料的邏輯分解

2. 布局

3. 背景

在不同場景下,背景色為深色(藍,藍綠,黑)時投放到大屏的展現效果較好。同時,為了顯示的內容更加清晰,字的顏色應該反差較大,因此文字多為淺色。

另外,除了使用背景顏色外,還可以使用背景,加上這樣的深色調,不止酷炫,而且科技感十足。

4. 配色

下面是從網上蒐羅到的比較常用的配色方式:

具體的 rgb 值可以通過取色軟體獲取,網上這樣的資源有很多, qq 軟體在截圖的時候也會顯示 rgb 的值,哈哈,這樣 qq 軟體也能為我們取色所用了。

5. 圖形化

通過使用 echarts.js, g3,hicharts 這樣的圖形化技術,可以讓原來靜態的柱圖,線圖等圖表,更加生動地將資料顯示在使用者面前。

6. 動態效果

完美的 dashboard 具有的特性是使用者互動性,使用者互動性一般又體現在哪些效果上呢?

滾屏

聯動

定時重新整理顯示的時間

鑽取7. 細節美化

(1) 適當使用圖示

在標題、明細列表、圖表中加上圖示,不僅能形象直觀地體現某一區塊的主題,還有很好的裝飾作用。

(2)邊框線

使區塊明顯分隔,資料顯示更清晰。

(3) 標題

標題可以使主題顯得清晰,乙個頁面中即使區塊分隔清晰、動態圖表再多,但如果沒有乙個標題的話,那也不會是乙個成功的 dbd,因為標題的缺失會降低可讀性。下面就是乙個沒有標題的效果圖。

試想一下,如果各個區塊都加上標題,我們在看到這個頁面時,就不會茫然的尋找是否有應該關注的資料了。

希望以上的總結,可以在布局、配色、互動等方面幫助到你,相對高效地做出能讓領導滿意的高大上的 dashboard,為你的職場加分,加薪!除了上面列舉的方式,還可以在網上多看些大屏的,從模仿開始。我覺得設計這種東西,多看多積累,慢慢就會沉澱下屬於自己的方式方法了。

大屏模板製作

設計大屏駕駛艙遵循四個基本步驟 布局排版 色彩 點綴效果 動畫。業務部門的需求,是要重點展現集團銷售總額資料以及各地區的資料,其他次要內容包括歷年銷售對比 各產品線銷售 熱門產品 實時交易 新老客戶佔比等。我們從常見的幾種主次分布排版樣式裡挑選了一種作為此次的版面,如下圖所示 由於集團業務遍布全國,...

大屏製作的探索

難度其實主要有兩點,第一點如何高質量的還原ui圖,第二點如何寬高自適應。這個問題對乙個成熟的開發來說其實不大,唯一的問題可能是不同尺寸的裝置上的顯示問題,比如我們在手機端自適應的時候,有1px邊框問題,大屏也會遇到類似的問題,重點排查解決就好了。寬度自適應,這個很容易,我們對比移動端,有rem,em...

如何製作動態層分組報表

潤幹報表提供了單元格同值合併的功能,可以實現動態層次的分組報表。這裡通過乙個例子來說明使用過程。目標報表 需要根據引數動態傳遞分組字段,按不同維度彙總訂單運貨費。如引數輸入 貨主地區,貨主城市 顯示的報表效果如下 當引數輸入 貨主地區,運貨商,貨主城市 時,報表顯示如下 以下為具體實現步驟 連線潤幹...