4年多的老技术,教你如何做可视化大屏项目,一学就会

2022年10月02日20:21:42 资讯 1260

这两年数据可视化大屏被炒的很热,老板动不动开口就要“酷炫大屏”,大屏的应用场景确实很多,不仅能实时监控重点数据,提高决策效率,放在公司会议室,展台等地方,还能提升公司形象。

于是各种讲怎么做大屏的文章越来越多了,但大师兄看到一些文章把大屏制作说的神乎其技,低门槛,成本低,给很多企业和IT从业者带来了误导,导致很多公司兴冲冲去搞大屏项目,但是花费了巨大的时间和成本,做出来的大屏实用性并不高。

4年多的老技术,教你如何做可视化大屏项目,一学就会 - 天天要闻

为此,大师兄特地请教了一个接触可视化大屏项目4年多的老技术,给大家科普一下实际工作中,一个可视化大屏项目的上线流程,顺带给大家扫一扫对大屏认知的误区。

可视化大屏项目实施流程

一般整个大屏开发流程可划分为六个部分,之前的文章里我介绍过,这边再简要讲一下:

1、需求调研:最耗费时间,最重要的一步。大屏需求调研是大屏项目的重中之重,搞清楚业务需求,做出来的大屏才有应用的价值,这个过程需要和业务方沟通确认,耗时很长,不少大屏项目前期需求没沟通清楚就动手开发,后面改到哭爹喊娘。

除了业务需求调研之外,如果要在硬件上展示的大屏,还需要对大屏硬件进行需求调研,比如大屏显示设备采购、分辨率输出等等。

2、原型设计:大屏展示什么指标,指标如何布局,一般需要列一个指标清单,和业务方明确。然后图表的样式,可视化交互功能,如钻取、联动、轮播等,根据排版好的内容落地成原型图demo。

4年多的老技术,教你如何做可视化大屏项目,一学就会 - 天天要闻

3、蓝图方案:然后根据原型图进行视觉美化,需要结合屏幕尺寸、分辨率、大屏的风格来设计。对于大屏而言,蓝图方案除了业务、数据、技术、实施方案外,更重要的是对大屏的指标、功能点、预期效果进行整理输出。

4、效果落地:根据蓝图在前端绘制demo

4年多的老技术,教你如何做可视化大屏项目,一学就会 - 天天要闻

5、数据处理:数据处理大致分为三步,底层数据处理,前端数据展现,数据校对。根据数据量和实时性需求权衡是否需要做结果表。

  • 数据量小(计算简单),准实时,不需要结果表
  • 数据量大(计算复杂),准实时,需要结果表。
  • 数据量小(计算简单),实时,不需要结果表。
  • 数据量大(计算复杂),实时,需要技术方案(如kafka+flink)

6、大屏调试:理论上显卡分辨率和PC端调试分辨率一致的情况下且字体自适应,不需要过多调试,在条件允许的情况下,建议在效果图落地甚至原型图设计阶段就进行大屏预调试。

4年多的老技术,教你如何做可视化大屏项目,一学就会 - 天天要闻

这样一套流程下来,一个大屏项目周期在10-20人天不等,如果需求复杂,很有可能一个项目耗费1-2个月,这之后还有相当大的维护工作要做,所以单纯从技术角度去做一张大屏很容易,但是要完成一个实用的大屏项目并不简单。

可视化大屏技术上如何实现?

通常做大屏前端方案设计有三类选择,①是自行开发,利用开源的自定义可视化图表;②是找集成商定制,可以软硬件一体化承包;③是利用BI/报表厂商的工具来制作。

1、自行开发。比如基于vue、Echart 框架构建大屏展示模板,网上有很多开源源码。其自带一些动效,比如数据动态刷新渲染、屏幕适应、内部图表自由替换、Mixins注入等功能,这个是前端。后端需要另写一套框架请求数据,一般java

后端开发比较麻烦,如果数据需求复杂的话,比如需要多源数据连接,不断的数据抽取和更新,定制开发难度会上升,代码复杂了多了还有BUG,制作周期比较长,维护成本比较高。

大师兄见过很多项目前期都是做了源码开发的尝试,最后因为不稳定,没人维护等原因走了商业开发。

2、大屏定制厂商:这种定制不是那种简单的图表展示。通常都是特殊需求,如3D建模,往往需要专业做可视化的厂商来按需定制。技术上基于三维的引擎来定制大屏效果。商业定制效果通常来说都是最优的,但实施成本和后期维护成本也是极其高昂的,实施起来几十到几百万不等。

3、BI/报表做大屏幕。现在很多大屏项目都是用BI/报表工具来开发,比如我们的报表工具FineReport

虽然其本身是报表工具,但它是一个能很好解决前端展示和后端数据读取连接的平台。再者本身提供构建可视化的“画布”(在FineReport里叫设计器),拖拽操作,对大屏的和移动设备也提供了一套高效可用的设计模式,构建可视化的成本比较低,上手也比较容易,光这一点就能节约不少的开发人力。

4年多的老技术,教你如何做可视化大屏项目,一学就会 - 天天要闻

4年多的老技术,教你如何做可视化大屏项目,一学就会 - 天天要闻

可视化方面,为大屏效果专门提供可复用模板和组件,能满足绝大部分大屏的需求,涉及到特殊3D模型,也可和专业厂商做集成,提供建模实施方案。

给大家整理了40+可视化大屏素材,更换数据能够直接使用,点击查看工具和素材包下载地址

4年多的老技术,教你如何做可视化大屏项目,一学就会 - 天天要闻

4年多的老技术,教你如何做可视化大屏项目,一学就会 - 天天要闻

另外,项目管理往往需要考虑成本,人力成本和后续的维护成本。FineReport具备前端展示和后端数据读取的技术条件,平台化的产品,后续维护成本也相对较低,收到了众多企业大屏项目的青睐。

大家对可视化大屏有哪些认知误区?

误区一:拿效果图当最终实现目标

我们经常能在网上看到很多视觉效果非常惊艳的效果图,拿来做参考,但是大部分的效果图都不能百分百复现,因为我们实际实施时需要适配屏幕分辨率,比如字体能否自适应大小。

一些动态展示如3D旋转以及图表空间和数据刷新的速率也无法看见,基本上实际图做出来会和效果图差那么一两成。

误区二:大屏仅仅是前端技术

很多人把大屏理解为单纯的前端展现技术,想的太简单了,数据从哪里来,是读业务数据库还是建立中间库,数据更新的频率要求是什么,数据质量有无问题还要先做底层数据处理?

硬件方面,需要明确大屏的尺寸、种类、驱动大屏的主机?业务方面,大屏展示什么指标和维度,业务分析逻辑谁来支撑?这些都是要考虑的。

误区三:大屏成本低,实现快

据我所知,一个大屏项目十几万是常有的事,上千万的大屏项目我也见过。大屏的成本除去前端设计和定制还有硬件费用,一个大屏硬件都是十几万、几十万起步。另外有一些智慧城市、制造行业有3D建模需求的,需要定制建模渲染,那成本就是无底洞了,有待商榷。

大屏的前端技术实现有很多种方案,有低代码的绘制,也有全代码的定制,取决于技术和需求,技术和业务需求总是相互取舍的。

4年多的老技术,教你如何做可视化大屏项目,一学就会 - 天天要闻

资讯分类资讯推荐

范玮琪力挺陈建州,第三位受害人站出来,好姐妹makiyo也补刀 - 天天要闻

范玮琪力挺陈建州,第三位受害人站出来,好姐妹makiyo也补刀

#陈建州风波牵连多位明星#近期,台湾省艺人陈建州性骚扰事件越演越烈,已经有三位女艺人大牙、郭源元和黑涩会美眉妖娇出来指控陈建州对她们的性骚扰行为。陈建州妻子范玮琪则发文力挺老公。范玮琪发文表示自己孕期一直在家,外出黑人一直陪同,黑人不可能存在带女性回家的可能。
一战华工的珍贵照片 - 天天要闻

一战华工的珍贵照片

赴欧劳工上船前消毒洗澡,发放印有编号的外衣、裤子、腰带及内衣、草帽及鞋袜等,还统一配置毛毯、铺盖、水杯和铁饭碗的工具包,并在离国前集中在威海等地稍作军训。
阳后还有这个后遗症,向风而行征文 - 天天要闻

阳后还有这个后遗症,向风而行征文

#头条创作挑战赛第二期#​#暖冬的生活记#​#电视剧向风而来行征文#​最近我右侧的眼睛好难受,每天睡醒就然糊糊的,一天感觉看东西不太清楚,视力下降很明显,头也晕晕的,闷闷的,不是很舒服。我不知道其他人阳后有没有这个症状。
北大高材生感叹道:“这辈子我就没说过几次真话!” - 天天要闻

北大高材生感叹道:“这辈子我就没说过几次真话!”

我有一个姓于的朋友,大家都管他叫老于。老于今年五七多岁,北大毕业,清华读的硕士,北师大读的博士,妥妥的学霸。他现在是一家厅级单位的副总工,待遇也不错。在我们这些人眼里,那可是人中龙凤,几乎是神一样的存在。有一次几个朋友一起喝酒,喝多以后,大家照例吹捧这位学霸朋友。
画家把字画作价3万放老板店里寄卖,老板索要2成佣金,被画家拒绝 - 天天要闻

画家把字画作价3万放老板店里寄卖,老板索要2成佣金,被画家拒绝

街上有那种卖字画的店铺,这种店铺非常的少,因为懂画的人也少。店铺的老板是个爱画之人,不是名家的画,只要是画的好,价格合适,他也会收下,或者帮忙寄卖。王立是一名没有任何名气的画家,经常会拿一些画到店里寄卖,几百到几千的价格都有。这一天,王立又拿来一幅画,说是要寄卖。
04年辽宁老汉捡石头修猪圈,发现"白发人头",专家赶来:终于找到了 - 天天要闻

04年辽宁老汉捡石头修猪圈,发现"白发人头",专家赶来:终于找到了

二〇二二年,很多很有名的节目被网友们重新翻出来,比如《今日说法》,网友们甚至还列出了必看节目单。说到必看的“电子榨菜”,网友们纷纷调侃起了一档节目,它十分喜欢以农村口耳相传的惊悚故事为开头,经过不断的探索,最终以科学的手段解释灵异现象,它就是《走近科学》。
运河拾韵:爱的波涛(十三) || 朱钧贤 - 天天要闻

运河拾韵:爱的波涛(十三) || 朱钧贤

作者:朱钧贤 摄影:竹叶青“老板,还有什么吩咐?”雪娟和素英同时止步,愕然的转过身来。徐文琪将手中的钢笔在桌子上敲了敲,注视了她们一眼,道:“还有几个问题要对你讲一讲,我们饭店是食品服务性质的,首先必须要求清洁和卫生,还有的是要注意服务态度必须热情周到,使客人满意。