乐趣区

关于运维:不用一行代码从0到1手把手教你制作酷炫可视化大屏

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

这种大屏看着高端大气上档次,然而其开发步骤却并不像设想中那么简略,根本步骤就有五步:

大屏开发工具

开发可视化大屏,个别有两种形式,一是用代码开发,还有一种是用现成的可视化工具制作。

用的比拟多的就是 JS+Ecahrts,但数据量撑持、后盾响应、实时更新、平台运维等应该还要调用更多的技术,十分考验技术水平,所以我举荐间接用可视化工具制作,比方 FineReport、dataV 等等,简略又不便,重点是不须要写一大堆代码,自带的图表插件可视化成果很炫酷。上面就以 FineReport 为例子,演示一下如何制作上面这样一张可视化大屏。

数据筹备

制作报表前首先须要定义数据起源,一般来说,企业的数据都是保留在数据库中,并且在不断更新,FineReport 能够间接和数据库进行链接,应用数据库中的数据来制作报表,并且报表内容会随着数据库的更新而更新。

新建决策报表

数据库链接好后,咱们新建报表模板筹备开始制作,FineReport 有三种报表模式,一般报表适宜用来做一些惯例类型的统计报表,聚合报表次要用来做中国式的简单表,决策报表适宜用来制作大屏或者驾驶舱。

因而,咱们抉择决策报表来制作一张大屏,关上 finereport 设计器的决策报表模式,新建决策报表:

新建数据集

新建数据集,将数据库中所须要的数据寄存在数据集中:

设计报表

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

咱们依照之前设计好的布局,将图表组建拖拽到对应地位,而后别离定义好数据链接,大屏雏形就实现了:

细节丑化

图表布局之后,下一步就是要对色彩、背景、图表题目等等细节进行丑化。

  • 配色

大屏背景最好应用深色暗色背景,因为深色暗色背景可缩小拼缝带来的不适感,而且还可能缩小屏幕色差对整体体现的影响;同时暗色背景更能聚焦视觉,也不便突出内容、做出一些流光、粒子等酷炫的成果

给大家几个举荐的配色计划:

背景不肯定要用色彩,也能够采纳深色系的图片,能够搭配其余一些事实个性能够让整体看着更有科技感。举荐应用一些带有星空、条纹、突变线、装点成果之类的图片等。

  • 对立图表系列、标签配色

  • 装点

在大屏展示上,细节会极大的影响整体成果,须要通过适当给元素、题目、数字等增加一些诸如边框、图画等在内的装点成果,能帮忙晋升整体好看度。

动态效果展现

到上一步,其实一张大屏就实现的差不多了,如果你感觉不够炫酷,还能够应用一些 3D 动效的图表插件,减少科技感,FineReport 提供很多这样的插件能够下载,晋升大屏逼格。

最初保留,点击预览,一张完满的可视化大屏就制作实现了。

模板展现

文字起源:https://www.toutiao.com/i6820…

退出移动版