不用一行代码，从0到1手把手教你制做酷炫可视化大屏

从大屏可视化出现以来，一直深受各界企业的追捧，最典型的就是每一年淘宝的双十一销售额大屏，最近我也刚接触了一个大屏项目，借此总结了一些可视化大屏制做经验与你们分享。

这种大屏看着高端大气上档次，然而其开发步骤却并不像想象中那么简单，基本步骤就有五步：

大屏开发工具

开发可视化大屏，通常有两种方式，一是用代码开发，还有一种是用现成的可视化工具制做。

用的比较多的就是JS+Ecahrts，但数据量支撑、后台响应、实时更新、平台运维等应该还要调用更多的技术，很是考验技术水平，因此我推荐直接用可视化工具制做，好比FineReport、dataV等等，简单又方便，重点是不须要写一大堆代码，自带的图表插件可视化效果很炫酷。下面就以FineReport为例子，演示一下如何制做下面这样一张可视化大屏。

数据准备

制做报表前首先须要定义数据来源，通常来讲，企业的数据都是保存在数据库中，而且在不断更新，FineReport能够直接和数据库进行连接，使用数据库中的数据来制做报表，而且报表内容会随着数据库的更新而更新。

新建决策报表

数据库连接好后，咱们新建报表模板准备开始制做，FineReport有三种报表模式，普通报表适合用来作一些常规类型的统计报表，聚合报表主要用来作中国式的复杂表，决策报表适合用来制做大屏或者驾驶舱。

所以，咱们选择决策报表来制做一张大屏，打开finereport设计器的决策报表模式，新建决策报表：

新建数据集

新建数据集，将数据库中所须要的数据存放在数据集中：

设计报表

FineReport决策报表采用的是画布式布局，图表组件自由拖拽、摆放，很灵活，内置了几十种图表类型，基本上够用了。

咱们按照以前设计好的布局，将图表组建拖拽到对应位置，而后分别定义好数据连接，大屏雏形就完成了：

细节美化

图表布局以后，下一步就是要对颜色、背景、图表标题等等细节进行美化。

• 配色

大屏背景最好使用深色暗色背景，由于深色暗色背景可减小拼缝带来的不适感，并且还可以减小屏幕色差对总体表现的影响；同时暗色背景更能聚焦视觉，也方便突出内容、作出一些流光、粒子等酷炫的效果

给你们几个推荐的配色方案：

背景不必定要用颜色，也能够采用深色系的图片，能够搭配其余一些现实特性可让总体看着更有科技感。推荐使用一些带有星空、条纹、渐变线、点缀效果之类的图片等。

• 统一图表系列、标签配色

• 点缀

在大屏展示上，细节会极大的影响总体效果，须要经过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果，能帮助提高总体美观度。

动态效果展现

到上一步，其实一张大屏就完成的差很少了，若是你以为不够炫酷，还可使用一些3D动效的图表插件，增长科技感，FineReport提供不少这样的插件能够下载，提高大屏逼格。

最后保存，点击预览，一张完美的可视化大屏就制做完成了。

模板展现

文字来源：https://www.toutiao.com/i6820...