輯導讀：數據面板能夠直觀反映出業務變化，并有助于決策層發出業務調整與決策。那么搭建數據看板時，需要注意哪些問題？具體步驟是什么？本文作者對一次數據看板的搭建進行了復盤，結合具體案例分享了數據看板設計過程中需要注意的一些問題，供大家一同參考和學習。

在工作中，筆者負責了數據看板的后臺配置化模塊。在前期產品設計時，一開始沒有對數據看板的需求、設計規范等的系統性認知，希望通過這次復盤，加深對數據看板有更進一步的認知。也希望對數據看板有需要的小伙伴有一定的幫助。

一、什么是數據看板？

提到「數據看板」，需要先了解「數據可視化」。

數據可視化，是把相對復雜、抽象的數據，通過可視的方式，讓人們更易理解的圖形展示出來的一系列手段。

而數據看板是數據可視化的載體，通過合理的頁面布局、效果設計，將可視化數據更直觀、更形象的展現出來。

數據看板一般用作后臺系統的首頁，或者作為系統的其中一個模塊，呈現當前業務、運營相關的數據和圖表，方便實時掌握業務情況，并能夠支持業務決策。

除了數據看板，還有數據大屏、管理駕駛艙、城市大腦等類似產品，有興趣的同學可以繼續探索。

二、數據看板需求分析

按照「為誰（目標用戶），提供什么樣的服務（業務流程），幫他達成怎樣的目標價值（業務指標）」來進行分析。

1. 目標用戶

目標用戶是相關業務的所有人員。可以按照基層/中層/高層來進行初步劃分，各層級所處位置不同，側重內容也不同，具體分析內容如下圖。

2. 價值

數據看板的主要價值是掌握情況，解決問題是較高層次的應用。

（1）掌握情況

掌握情況是目標用戶的基本需求，根據現狀來分析與目標的差距，發現業務問題。大部分是數量的統計，不包含分析類的內容。

• 面向高層的戰略看板，一般會通過純數字形式來展示核心指標，不需要復雜的圖表。

選自GrowingIO

• 面向中層的業務看板，注重過程和組成，多使用增長曲線等形式來體現數據分布、規律和變化。

選自神策數據

（2）解決問題

能夠通過數據可視化，從動態數據中提煉規律，發現不符合預期的部分進行優化迭代，然后再通過看板進行效果驗證。

今夏的熱門綜藝《乘風破浪的姐姐》的數據表現如何？通過百度指數可以看出，雖然每期節目首播在周五，但一般是周六達到高峰。同時在6月份開播后熱度不斷下降，如果沒有什么調整優化，后期的熱度讓人難以期待。

選自百度指數

三、數據看板設計

在進行看板設計時，需要結合頁面層級、布局、指標圖表、配套功能進行綜合考慮。在設計中，要注意三個要點：

• 簡單高效，優先滿足查詢效率，而不是酷炫的交互。
• 信息具有強關聯性而不是孤立的數據，具體就是要有環比、同比來體現變化。
• 選用的數據能夠體現趨勢和規律，對于無趨勢特性的數據直接展示數字比較好。

1. 頁面層級

層級結構時，建議2層嵌套即可。一方面，3層以上嵌套過深，不直觀，不容易被用戶發現，另一方面需要反思，是否是指標過多、分類不當，需要進行調整內容歸類，進行一定刪減，避免無用指標。

2. 頁面布局

每一頁的布局需要考慮是單屏，還是長屏頁。單屏、長屏，是指一屏內是否可以放得下，是否需要滑動屏幕才看得到所有內容。

如果是長屏，建議將一屏外的內容露出部分，引導用戶進行滑動查看。特別是Mac的系統，默認不展示滾動條，如果用戶沒有滑動屏幕，也沒有看到滾動條，那一屏外的內容，很可能就永無見光之日了。

在Ant Design Pro的示例中，數據看板為長屏頁。在一屏外，還有很多內容待曝光，所以將「線上熱門搜索、銷售額類別占比」露出，吸引用戶查看剩余內容。

選自Ant Design Pro

3. 指標圖表

每一屏的數據看板是由圖表組成，常見的圖表分別是柱狀圖、折線圖、面積圖和餅圖。每種圖表適合的場景，可以在AntV G2Plot中進行查看。

AntV G2Plot 圖表庫地址：https://g2plot.antv.vision/zh/examples/area/stacked

選自AntV

關于圖表的類型，也可以通過ECharts進行了解。ECharts是目前比較流行、在前端開發常用的開源可視化庫。

ECHARTS：https://echarts.apache.org/examples/zh/index.html

也可以按照圖表想表達的內容類型，選擇相應的圖表。在AntV中，區分了「比較、趨勢、組成、占比」等8組類型對應的圖表。

antV訪問地址：https://antv.vision/zh

選自AntV

4. 圖表的配套功能

圖表選擇完成后，需要考慮該圖表的配套功能都有哪些，包括：

• 設置權限：哪些人可見，哪些人不可見，可能在數據看板設置，也可能在后臺進行配置；
• 支持下載：將看板數據通過excel進行下載導出，公司敏感數據是否要支持下載，需要和業務方進行確認；
• 全屏展示：將單一圖表進行全屏展示，更精細的查看圖表內容；
• 編輯看板：包括編輯看板的層級結構、指標內容、圖表類型等，比如調整看板名稱，更換指標，從折線圖調整為柱形圖操作。

選自GrowingIO

需要哪些配套功能，看具體的需求。之前負責的需求是「前臺只支持展示，通過后臺配置看板的層級，選擇指標以及指標維度」。維度，包括了分類、統計周期、選擇（對比）日期等等。維度越多，靈活度越高，新用戶的學習成本、操作成本會越大。

下圖是最初設計的原型，就遇到了上述的問題。最后上線的版本中，只保留了分類和統計周期兩個選項，將其余維度設定為內置信息放入。

結語

在進行數據看板規劃時，建議參照現有的數據服務平臺，比如GrowingIO、神策數據、諸葛io、小馬BI，多多體驗平臺的demo。借助成熟的參考，幫助我們更快更有質量的完成看板設計。

實際工作中，對于看板中使用哪些指標，或許作為產品經理的我們沒有太多話語權，但我們依然需要了解指標背后代表了哪些業務含義，可以透過指標解決哪些問題，做到知其然知其所以然。

參考文章：

《產品設計心法：數據看板篇》

《后臺產品方法論：如何搭建數據看板？》

本文由 @涼涼Lxy 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

著大數據時代的來臨，社會對大數據人才的需求也日益旺盛，自然少不了我們前端工程師，我們前端工程師能做什么呢？這個自然就是做大數據可視化了，數據再多，沒有很直觀的呈現那也是白搭。現在好多政府企事業單位對大屏可視化的項目需求日益旺盛，這無疑給我們前端工程更多的機會，那我們如何入手做一款漂亮絢麗的大數據看板呢。

首先展示下我這個項目案例的效果圖

這個案例是不是直觀呢：

• 以中國地圖的形式展示設備網絡分布
• 各種餅狀圖、柱狀圖、折線圖數據刷新的效果圖
• 以及各種數據匯總的列表效果

是不是很高科技上檔次呢，在來看一段視頻的動態效果：

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

這款項目是基于echarts實現的

echarts正如官網所說，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。

具有以下特點：

• 豐富的可視化類型，提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖等
• 多種數據格式無需轉換直接使用
• 千萬數據的前端展現
• 移動端優化
• 多渲染方案，跨平臺使用！
• 深度的交互式數據探索
• 多維數據的支持以及豐富的視覺編碼手段
• 動態數據
• 絢麗的特效
• 通過 GL 實現更多更強大絢麗的三維可視化

更多介紹請查看官網 https://www.echartsjs.com/zh/index.html

這個項目你需要用到的技術

其實用到的技術很簡單，掌握基礎的前端就行

• html 和 css 布局相關的知識
• jQuery相關基礎內容
• 掌握echarts的基本內容

代碼部分

Echart引用代碼示例

1、引用 echarts.min.js 文件2、準備div容器

<div id="main"></div>

3、初始化 echart 實例

var myChart=echarts.init(document.getElementById('main'));

4、初始化圖表數據，示例代碼如下

var option={
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

5、顯示圖表

myChart.setOption(option);

適配說明（rem）

本案例設計稿寬度是1920px，rem 初始基準是24px。

1、如何做適配呢？

保持設備寬度與rem基準值比例為 80 即可

2、這里用JS進行初始化基準，窗口大小改變，就會進行調整，示例代碼如下：

(function () {
    // 1、頁面一加載就要知道頁面寬度計算
    var setFont=function () {
        // 因為要定義變量可能和別的變量相互沖突，污染，所有用自調用函數
        var html=document.documentElement;// 獲取html
        // 獲取寬度
        var width=html.clientWidth;

        // 判斷
        if (width < 1024) width=1024
        if (width > 1920) width=1920
        // 設置html的基準值
        var fontSize=width / 80 + 'px';
        // 設置給html
        html.style.fontSize=fontSize;
    }
    setFont();
    // 2、頁面改變的時候也需要設置
    // 尺寸改變事件
    window.onresize=function () {
        setFont();
    }
})();

注：計算式可能有小數，很多位，保留3為有效小數，不去除0

基于 flex 布局 和 原生CSS動畫

這個頁面局基于flex彈性盒子布局，其他的內容都是基于原生的JS寫的，動畫效果基于CSS3。

如何獲取本案例

由于代碼比較多，就不在這一一列舉了，由于文章不太方便貼下載鏈接，那怎么獲取本案例的代碼呢？

1. 首先關注“前端達人”頭條號
2. 私信回復“大數據案例” 進行索取

天再分享五個用于智慧運維 智慧運營h5大數據大屏幕展示網站模板，這五個模板都是html靜態頁面，可以直接使用，對接后臺數據，頁面漂亮美觀，如果你覺得有用，請轉發，私信我下載。

一.大數據統計展示大屏模板

基于bootstrap框架制作的機械設備運行大數據統計展示大屏頁面，統計圖表頁面模板。圖表用的ECharts，易修改。

二.大數據運維總覽圖模板

jQuery基于echarts制作的TIZA STAR大數據運維總覽圖表實例，數據看板圖表實例實例，后臺數據統計圖表案例展示代碼。

三.可視化監控管理模板

html5全屏的服務器設備監控管理大數據平臺頁面模板，服務器運維可視化管理頁面ui模板下載。由于圖片命名是中文，本服務器無法顯示。

四.設備環境監測平臺模板

基于echarts設備環境大數據監測平臺模板，包括各種圖表,響應式網頁模版,廣西環境檢測位置等

五.廳店效能大屏監控看板模板

echart美化版酷炫動態的營業廳營業效能分析數據模塊頁面模板html下載。包含：門店基本信息，門店歷史受理詳情，營業員受理詳情，門店臺席健康度，耗時步驟分析，業務類型耗時分析模塊。

這五個智慧運維 智慧運營H5數據模板，下載方法，請轉發，私信我們云碼素材。

歡迎關注云碼素材，交流分享! 云碼素材原創作品，更多精品資源下載，技術分享請關注，私信云碼素材！