从 0 到 1 手把手教你制作酷炫可视化大屏

秒速五厘米 2021-09-08 21:16 319阅读 0赞

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

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

![06323d43eac2e4a593dbd008973140ab.png][]

## 大屏开发工具 ##

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

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

## 数据准备 ##

制作报表前首先需要定义数据来源，一般来说，企业的数据都是保存在数据库中，并且在不断更新，FineReport可以直接和数据库进行链接，使用数据库中的数据来制作报表，并且报表内容会随着数据库的更新而更新。

![048fdabf5f5068e9400080d8adb45b7c.png][]

## 新建决策报表 ##

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

因此，我们选择决策报表来制作一张大屏，打开finereport设计器的决策报表模式，新建决策报表：

![4ddfa0f6e189e1e8a93f14eb8a1e84bb.png][]

## 新建数据集 ##

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

![ee35a5a18eb7dca7b5ae91cd42b4e7d3.png][]

## 设计报表 ##

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

![b43572668c2c4da5bb6070ee33ec99ca.gif][]

![2fdbcf8fac5a8141c47945d69f9295b6.gif][]

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

![d94c8766c9f80da3ec7c9c3eaae34ce7.png][]

## 细节美化 ##

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

*  配色

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

给大家几个推荐的配色方案：

![89f5671091384e47d71491d0736f7818.png][]

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

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

![8d389688eb0dee45f9cca0da3697a29f.png][]

*  点缀

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

![97278ae80ba0b9471b45a942783e23ed.png][]

## 动态效果展示 ##

到上一步，其实一张大屏就完成的差不多了，如果你觉得不够炫酷，还可以使用一些3D动效的图表插件，增加科技感，FineReport提供很多这样的插件可以下载，提升大屏逼格。

![07f1d72a09087581beb989ddea0b269d.gif][]

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

## 模板展示 ##

![bdedfec1e5e5d49dd691b5789d6d999e.gif][]

![3c3018c8523cf594064dbead2c06253f.gif][]

![9754d4259024bdb87514ba583f82d3aa.gif][]

![a694e715511465fadd09efb160e3dca7.gif][]

来源：https://www.toutiao.com/i6820633397023474180/

如果看到这里，说明你喜欢这篇文章，请 转发、点赞。微信搜索「web\_resource」，关注后回复「进群」或者扫描下方二维码即可进入无广告交流群。

**↓扫描二维码进群↓**

![d648c2db3dbdb7266d0a4a677b6ee6e0.png][]

--------------------

推荐阅读

*1. *[GitHub 上有什么好玩的项目？][GitHub]

2. [Linux 运维必备 150 个命令汇总][Linux _ 150]

*3.** *[SpringSecurity + JWT 实现单点登录][SpringSecurity _ JWT]

*4. *[100 道 Linux 常见面试题][100 _ Linux]

![a91bb1fe09e2c5ad4df238a881241bb3.png][]

[06323d43eac2e4a593dbd008973140ab.png]: /images/20210730/6a5ff10e2d9e4b22a3a6bb40cfb2812d.png
[048fdabf5f5068e9400080d8adb45b7c.png]: /images/20210730/b2725a2f7af34ed6ac2b9b974bc1b1c8.png
[4ddfa0f6e189e1e8a93f14eb8a1e84bb.png]: /images/20210730/974b4cd79a9a4556b17fef6ea358dbac.png
[ee35a5a18eb7dca7b5ae91cd42b4e7d3.png]: /images/20210730/62aeba217b85468fa1782bc5ca0aca06.png
[b43572668c2c4da5bb6070ee33ec99ca.gif]: /images/20210730/d707273f0cf049b28683541c84949275.png
[2fdbcf8fac5a8141c47945d69f9295b6.gif]: /images/20210730/b4964a7e99a349479056fb45573ae14a.png
[d94c8766c9f80da3ec7c9c3eaae34ce7.png]: /images/20210730/2a130777da73441698a34608ac5c8d04.png
[89f5671091384e47d71491d0736f7818.png]: /images/20210730/c75b2a76969c407187acdf092c22c022.png
[8d389688eb0dee45f9cca0da3697a29f.png]: /images/20210730/4386c1a1910a4215843c52eb8c7931b7.png
[97278ae80ba0b9471b45a942783e23ed.png]: /images/20210730/3adfb623a1e447ba9d66abd8bf20d267.png
[07f1d72a09087581beb989ddea0b269d.gif]: /images/20210730/f5e233f54ac840d88dc2f820be1844cc.png
[bdedfec1e5e5d49dd691b5789d6d999e.gif]: /images/20210730/6c74ba83522d414180410a5e8ff2ef64.png
[3c3018c8523cf594064dbead2c06253f.gif]: /images/20210730/179ab3ef545d4cbc80bea61ab63bba0c.png
[9754d4259024bdb87514ba583f82d3aa.gif]: /images/20210730/9c9c31511a3942d4954f5a076b46b204.png
[a694e715511465fadd09efb160e3dca7.gif]: /images/20210730/1560db983ab54137af681838532c625f.png
[d648c2db3dbdb7266d0a4a677b6ee6e0.png]: /images/20210730/9bb5dfc94c234abaae5d217ffedb252b.png
[GitHub]: http://mp.weixin.qq.com/s?__biz=MzUxNjg4NDEzNA%3D%3D&chksm=f9a2286fced5a1794eb9a73d0be7c2e16eaceabf3a0420647c40cb4202bd116d9a15dd57c008&idx=1&mid=2247498662&scene=21&sn=0087c4f3b79ba3420e917e9b42d45eda#wechat_redirect
[Linux _ 150]: http://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg%3D%3D&chksm=ce0e3f10f979b606a9915aea543e34da632e6af092d65f0a071845e2c079cf6fe7077bf2315c&idx=2&mid=2247518355&scene=21&sn=23c5bc3477a0185b517840b8318fb166#wechat_redirect
[SpringSecurity _ JWT]: http://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg%3D%3D&chksm=ce0e35bdf979bcabbb75366e1bad32bdbf8f41d1dc80b8be6e39225bd708913ce2c93472f2fc&idx=1&mid=2247516734&scene=21&sn=966d166d3052f10b9310ff4014733669#wechat_redirect
[100 _ Linux]: http://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg%3D%3D&chksm=ce0e367bf979bf6dec769decc0194bb36de4caeae7947671aba1852fe6bac8e5dab7d20916a5&idx=1&mid=2247516664&scene=21&sn=0dae1a8cf99c4bde8fd8c9c197769009#wechat_redirect
[a91bb1fe09e2c5ad4df238a881241bb3.png]: /images/20210730/e14cb5e362e049b28ca26358e6ea238e.png