大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)

发布日期:2022-04-15 23:26:09 来源:郑州计算机学校

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第1张

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第2张

今年可视化大屏又被大家推上了热搜,什么500强企业分析大屏、指挥中心大屏、大屏可视化分析等,处处都有着大屏可视化分析的背景。

那我们作为一名普通人,在没有天猫双十一发布会那种财力下,也没有程序员的开发能力,我们能自己创作出一款大屏吗?

答案当然是肯定的!!

想象一下,你在向老板汇报的时候,突然告诉老板,我有能力去开发一款高端大气上档次的可视化大屏,可以媲美双11大屏,老板是否会对你刮目相看呢,升职加薪,迎娶白富美,走上人生巅峰不是梦!

小编之前也曾经在一个团队里为公司做过可视化大屏,经历了与需求方的不断交涉、优化,最终做出了几张比较满意的大屏:

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第3张

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第4张

这样的大屏不仅拥有着高端的科技感,而且都是经过了多次的版面设计和修改,这次大屏效果在同行业内部交流过程中反响不错。下面我就给大家介绍一下用FineReport这款个人免费软件,是如何做出属于自己的大屏的。

首先,来看一下业内各个行业的大屏demo和实景。

大屏可视化行业demo

企业销售部业绩公示大屏

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第5张

金融类双11数据演示

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第6张

国际业务的双11数据演示

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第7张

国内双11物流数据演示

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第8张

综合类双11作战指挥室

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第9张

工程部设计规划指挥中心

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第10张

大屏可视化现场案例

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第11张

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第12张

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第13张

(实际案例,出于保密,部分内容已做模糊处理,大家将就着看哈,现场动态效果比单纯看照片震撼很多!)

大屏可视化制作流程

下面我们就来介绍一下大屏具体是如何制作的。

1.工欲善其事比先利其器

第一步我们得先安装FineReport,免费获取大屏激活码并安装。

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第14张

PS:偷偷告诉你,这是一款个人用户可以免费使用的神器,当然了,Finereport的定位还是企业版web报表工具。

2.磨刀不误砍柴功

先建一个空白大屏模板(决策报表),如下所示。

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第15张

接下来,我们要思考一下,在这个空白界面上,我们的大屏需要怎样的布局?

有如下几种常见的布局体系

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第16张

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第17张

以上是几种常见的大屏排布方式,一句各个大屏模板所需要展示的具体信息我们可以自行选择,需要注意的点就是需要有重点信息,有辅助信息,重点信息重点展示,辅助信息用来辅描述重点信息。

3.选择合适的可视化元素

FineReport内置了数十种可视化元素,不同类型的图表,可以表达的含义不同,样式构思完毕之后 ,就需要考虑在帆软众多的图表库中挑选合适的图表来展示相应的信息了。

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第18张

4.多样化的炫酷插件

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第19张

轮播GIS点地图

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第20张

轮播目标齿轮

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第21张

时间齿轮

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第22张

轮播夜光仪表盘

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第23张

FineReport大屏插件有很多,小编在这里列举几个,想要下载插件话可以在这里找到:服务器>插件管理>安装/更新扩展图表3.0

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第24张

5.添砖加瓦,细节雕琢

上一步我们把大致的框架搭好啦,但是总觉得不那么好看?为什么呢?因为我们缺几样东西。一个是主心骨(总领全局的突出指标),一个是配色。

所以,我们先来给加一个全局指标,也就是我们关注的销售总额数据,从快捷栏中拖入一个表格组件,并在表格中绑定销售额数据。

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第25张

可以浏览一下效果,是不是瞬间觉得整个页面有了主心骨呢?

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第26张

紧接着,我们开始对配色进行调整。这个时候,如果你懂一些美工方面的知识,或者说公司有专门的美工同学,那就事半功倍啦,照着美工出具的效果调整就行。

那没有美工怎么办呢?

不要紧哈,按照我们的一般套路&参考官方demo样式,人人都可以自主调出好看的效果。而且FineReport提供了非常简单、灵活的自定义设置,可以针对各个细节进行自由调整。比如小编这样随手调了几个深色系样板:

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第27张

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第28张

6.持续迭代,精益求精

到上一步,我们搭出的demo基本可以看了,但顶多也是差强人意,离优秀还是有一些距离的,我们可以通过更多的技巧来继续优化。

比如为页面添加一些合适的图片背景或者边框元素,比如设置图表的动画效果,比如设置监控刷新来实时更新数据等等。

下图GIF是我们给地图添加了数据监控及自动数据提示,会根据后台数据变更情况实时在页面上展示。

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第29张

大屏数据可视化展示(手把手教你做酷炫的数据可视化大屏)_http://www.jidianku.com_计算机基础知识_第30张

其实大屏的设计一方面需要不断积累经验,另一方面也需要善用大屏工具,一个好的可视化工具能够让你做起大屏来得心应手,像我这一次用的FineReport就完全没有涉及编程,换成是数据小白也一样能够做出高端大气的大屏。


温馨提示:内容来源于网络,仅用于学习交流,无任何商业用途,如有不妥或侵权,请告知,立删!

热门专业推荐

计算机软件应用技术

本专业主要面向机关、企业、事业、公司等应用计算机技术的相关领域,培养具有扎实的计算机专业知识、计算机网络基本应用能力,能够从事计算机办公自动化、计算机综合应用和计算机网络搭建管理,熟练掌握计算机网络构建及管理能力、计算机硬件安装与维护能力、绘图制图能力、网页设计能力,并在建筑信息设计技术方面达到一定水平的高素质技术技能型人才。

电子商务专业

本专业培养学生熟悉信息科技与技术的基本知识和方法,掌握电子商务系统工程的开发、应用与管理的技术和技能,具有创新精神、较强的管理能力和独立分析问题的能力。

计算机平面(3D)设计

本专业培养学生具有动漫设计、制作、绘画、广告设计、网页设计等技能,具备熟练计算机操作能力的技术应用型人才。

音视频剪辑(影视后期制作)

本专业培养以这个专业的培养目标是培养学生具备扎实的文学功底和通晓视听语言的能力,同时熟练掌握包括数字化技术在内的各种剪辑技术。