只要10分钟，教你配置出炫酷的数据可视化大屏

首页 > 关于我们 > 媒体报道 > 文章详情

2019-09-10

在电影《摩天营救》中，监控中心的全方位展示屏幕给人印象深刻。现在这种立体化大屏幕似乎成了好莱坞大片的标配。其实，这种逼格很高的镜头就是一个数据可视化大屏。

随着社会信息化的高速增长，数据可视化大屏已经在很多商业领域彰显价值。比如会议展厅、园区管理、城市交通调度中心、公安指挥中心、企业生产监控等重要场所。

相对于传统的可视化工具开发出来的图表和数据仪表盘，如今的可视化大屏，搭载地理轨迹、飞线、热力、区块、3D地图/地球，多图层叠加等技术，能生动友好地“活化”数据；同时也能结合丰富的交互功能和实时性，让数据“开口说话”，传达出超出其本身的信息。

今天DataHunter数猎哥就来说说如何运用可视化大屏工具，配置出一页炫酷的可视化大屏。（本文配图主要借助 DataHuner 自主研发的 Data MAX 数据可视化大屏软件制作）

一、创建大屏

Data MAX 是DataHuner自主研发的、基于浏览器的、一款用于配置数据可视化大屏的工具平台。它提供了丰富的可视化设计组件，通过简单的点击、拖拽等操作，即可进行图表布局的调整，只要几分钟就可以配置出一页炫酷的可视化大屏。

1.主题模板

首先登录后台，点击“新建大屏”，这里可以看到多种主题模板，例如：“企业季度销售数据”、“融媒体传播力分析”、“消费品门店销售监控”…等等。

这些主题模板都自带整体场景、图表资源、配色样式、位置布局、Demo数据、动效属性等，可支持企业的指挥中心、业务看板、汇报演示等各种业务场景。只需调用预置的模板进行更改，最后将各组件在配置中接入数据即可生成可视化大屏。

2.空白模板

除了主题模板以外，还可以创建空白模板，以便自由定制风格和样式。点击右上角的“创建大屏”，即可进入。页面分为两个部分，左边提供了各种可视化设计组件，其中包含基础组件、地图组件、高级组件、文字内容和辅助图形；右边则是可视化大屏。

点击左上角的“基本组件”，选择所需的各种组件，比如柱状图、双轴图…对这些组件进行点击、拖拽、放大缩小等操作，然后按照自己的想法就可以配置出一页炫酷的可视化大屏。

除此以外，Data MAX 还支持用户批量管理这些组件，比如组件组合、组件多选等操作，用鼠标左键框选，可以选中多个组件，并可以将多个组件从一个位置统一拖动到另外一个位置。

另外还支持用户对多个组件进行组合，我们鼠标框选，或者通过“Ctrl+鼠标点击”，选中多个组件，点击右键即可弹出功能菜单，进行组件组合。

关于可视化大屏的页面布局，这里需要注意的是：可以采取主次分布版式，也就是核心业务指标放中心，次要业务和辅助业务指标放两边；也可以采取平均分布，还可以两者相结合进行适当调整。

3.预览与保存

最后点击右上角的“预览”，即可弹出一个页面，这时在这个网页上就可以对刚才配置的看板进行预览了，关闭网页即可退出。最后我们点击左上角的“箭头”退出，系统即默认进行了保存。

二、组件属性配置

前面分享了Data MAX 大屏创建，接下来介绍如何对各种组件进行属性配置。以“基本组件”为例，拖入一个基本组件：比如“双轴图”，点击这个组件的复选框，在右边即可看到组件属性配置的各项参数。

1.复选框参数

最上面的参数设置是复选框的设置，宽和高分别代表框的数值大小，左和上代表在大屏中的坐标位置。下面是名称和风格，系统暂时默认是星空风格。

2.全局样式

也就是其中双轴图的各种参数，比如字体样式，“边距”则是双轴图在复选框内的位置坐标。最后是“柱子样式”，比如是否堆积，宽度占比、柱体间隙、柱体的棱角圆角值，还有背景色等。

3.数据样式

这里指其中图表内每个项目柱体的形状与颜色，比如框内填充色、边框色还有边框粗细等参数的调整；

由于是双轴图，所以除了柱状图的各种参数设置，还有折线图的参数设置，比如折线颜色、粗细、阴影大小和颜色、是否平滑、是否显示各种数据点、点的直径、颜色等各种参数的数值等。

4.柱体数值

这里主要指的是图表中各数据值是否显示、文本样式、还有格式等参数设置，比如数值格式里又可勾选“缩写方式”、“显示格式”、“小数点位数”等等，主要方便更容易识别图表的具体数据。下面的折线数值也是一样。

5.坐标轴

坐标轴的参数设置主要有“是否显示”坐标轴、文本样式、坐标轴和文字间距、轴线参数、还有网格线、刻度线等这种细节参数的设置。

这里需要注意的是还有一个参数设置如“缩略轴”，当数据较多时，或者数据随时间变化时，而我们只想看到最近3天或者一周的数据时，可以勾选“缩略轴”显示，然后设置起始的位置和长度，即可显示想要呈现的数据。Y轴与X轴一样。

6.图例

任何数据图表都需要有图例，因为没有图例，看可视化图表的人就可能不能直观的了解到数据图表所呈现的意义，这里我们勾选显示，下面的参数还可以对图例进行位置、间距还有文本样式的设置。

7.hover层

hover这里是选择器的意思，也就是当鼠标放在双轴图的柱子上时，可以弹出这个维度项具体的数据，可以选择触发动作为“鼠标悬浮”或者“点击”，另外下面的“文本样式”、“边距”、“背景框样式”都是对弹出的文本样式进行各种参数的设定。

8.是否开启动画

指的是当打开可视化大屏时，各种图表组件里呈现动画效果，比如当我们拖入“双轴图”，可以看到里面的柱子从X轴，有像喷泉一样动画效果呈现出来。每个图表都有自带的动画效果，一般系统默认是开启动画的。

9.数据类型

这个部分是组件属性配置最重要的，Data MAX 的组件数据接入现在有两种方式：静态json数据和API接口。下面的“数据配置说明”和“数据配置”都是与“数据类型”相结合，这三块的具体参数配置，将会在下文中单独进行详细介绍。

10.组件交互

当在做汇报演示，或者查看业务数据时，需要将将可视化大屏内的各种组件、或者不同的可视化大屏之间做数据的联动过滤筛选、钻取，以便了解业务细节，这时我们可以设计组件交互效果。交互方式有5种：分别是无、弹窗、跳转或者放大。

总的来说，各种组件的参数配置大体相似，比如柱状图、折线图、饼状图，还有雷达图。当然还有额外的一些组件还有其他的参数设置，比如：

（1）基础组件中“仪表盘”的参数配置中有“预警”功能，当数值达到多少时，仪表盘可以通过颜色的变化来呈现预警的可视化效果；

（2）地图组件中“2D地图”的参数配置中会有“气泡”“卡片”“飞线”“区域充填”等各种参数的调整；

（3）高级组件中“TAB”参数配置中，我们点击“Tab列表”，可对其中轮播的图表进行配置，这里我们直接将配置好的图表链接复制到地址选项，修改名称即可，最后还可以设置轮播的时长间隔等参数。总体来说，依据自己的需求进行配置即可。

三、组件数据接入

在前面介绍组件的属性配置时，我们遗留了关于组件如何接入数据的问题，Data MAX 提供了多种数据对接模式，包括静态json数据和API接口。静态数据是通过线下实时编辑的方式进行数据调整，进而调整整体展示效果，而API则是实时对接数据库。

1.静态json数据

在基础组件里选择“彩色柱图”，然后在“数据类型”中勾选“静态数据”，系统暂时是默认了一部分静态数据，将其删除，然后添加自己的静态数据。

这里直接打开提前用Excel数据转化好的静态数据代码，然后复制到数据类型的配置框中，往下滑动页面，点击执行即可看到组件的数据已按照我们接入的静态数据进行了更新。

这里很多人会说我不懂代码，该如何接入静态数据呢？当然也是有办法的，如果你身边的同事如果有懂代码的，你可以直接咨询他们；如果没有，网上也有很多第三方工具可以直接将Excel数据转换成静态数据，直接百度就可以了。

如果导入的静态数据没有显示出现，这里需要注意“数据配置说明”和“数据配置”这两块的内容，主要是其中的维度项和值是否在你的静态数据代码中与图表类型相对应。

打个比方，柱状图所要求的是一个维度对应一个值，而散点或气泡图对两个维度对应一个值或者两个值，另外是雷达图则是多个维度对应多个值，这些都需要与静态数据代码一一对应。详细内容可以参考我们之前发过的文章《活用这23种图表，让你的数据分析胜人一筹》。除此以外，还需要注意静态数据默认“数值”格式，如果是百分比，则需要修改为带小数点的数值才能显示。

2.API接口

Data MAX 还可实时通过API对接数据库，API支持对接的数据库具体包括：My SQL 、Oracle 、GreenPlum 、Postagre SQL 、SQL Server 、Hive、Kylin、Sybase、Vertica等。

在“数据类型”里勾选“API”选项，在“受控组件”里选择彩色柱图的组件。然后选择请求方式这里有get、post两种方式，这里可以选择post，然后设置是否定时更新，时间间隔是多久，最后我们输入API地址。

这里需要注意的是你的API地址首先需要找我们官网人员在后台进行创建和开通，开通以后，才可以进行API数据的接入，这里我们提前准备好了一个API地址，然后复制进去，点击下方的执行即可显示。

四、小结

在这里，我们已经跟大家分享了关于“大屏创建”、“组件属性配置”、“组件数据配置”，另外还有额外的功能，比如“大屏设置”中的缩放方式，可以针对大屏投放到不同终端时，可依据屏幕分辨率进行适配，比如“链接分享”，可直接将可视化大屏进行分享等。

整体来说关于Data MAX 可视化大屏如何配置，已经基本介绍差不多了。Data MAX 操作起来非常简单，只要上手试一试，就能配出属于自己的炫酷可视化大屏。你可以添加小助手微信Kelly-HR，了解你最想使用的功能。

上一篇：如何做好数据埋点，选择方式很重要

下一篇：深度解析 | 如何控制成本提升ROI？

Data Analytics

Data MAX