辑导读：数据面板能够直观反映出业务变化，并有助于决策层发出业务调整与决策。那么搭建数据看板时，需要注意哪些问题？具体步骤是什么？本文作者对一次数据看板的搭建进行了复盘，结合具体案例分享了数据看板设计过程中需要注意的一些问题，供大家一同参考和学习。

在工作中，笔者负责了数据看板的后台配置化模块。在前期产品设计时，一开始没有对数据看板的需求、设计规范等的系统性认知，希望通过这次复盘，加深对数据看板有更进一步的认知。也希望对数据看板有需要的小伙伴有一定的帮助。

一、什么是数据看板？

提到「数据看板」，需要先了解「数据可视化」。

数据可视化，是把相对复杂、抽象的数据，通过可视的方式，让人们更易理解的图形展示出来的一系列手段。

而数据看板是数据可视化的载体，通过合理的页面布局、效果设计，将可视化数据更直观、更形象的展现出来。

数据看板一般用作后台系统的首页，或者作为系统的其中一个模块，呈现当前业务、运营相关的数据和图表，方便实时掌握业务情况，并能够支持业务决策。

除了数据看板，还有数据大屏、管理驾驶舱、城市大脑等类似产品，有兴趣的同学可以继续探索。

二、数据看板需求分析

按照「为谁（目标用户），提供什么样的服务（业务流程），帮他达成怎样的目标价值（业务指标）」来进行分析。

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数据模板，下载方法，请转发，私信我们云码素材。

欢迎关注云码素材，交流分享! 云码素材原创作品，更多精品资源下载，技术分享请关注，私信云码素材！