这两年,数据可视化大屏在数据报告中的占比越来越大,企业和政府会更倾向于选择炫酷大屏进行数据分析展示。炫酷大屏不仅能实时监控重点数据,提高决策效率,放在公司会议室,展台等地方,还能提升公司形象。
作为一个从事可视化大屏项目3年多的秃头技术,做过大大小小几十个大屏项目,给大家科普一下实际工作中,一个可视化大屏项目的上线流程。
一般整个大屏开发流程可划分为六个部分,分别是:
需求调研
原型设计
效果图设计
效果落地
数据接入
大屏调试
需求调研
需求调研是整个大屏制作过程中最耗费时间,最重要的一步。只有搞清楚业务需求,做出来的大屏才有应用的价值,这个过程需要和业务方沟通确认,耗时很长,不少大屏项目前期需求没沟通清楚就动手开发,后面改到哭爹喊娘。
除了业务需求调研之外,如果要在硬件上展示的大屏,还需要对大屏硬件进行需求调研,比如大屏分辨率,大屏显卡所支持的分辨率输出,显卡是否支持自定义分辨率,HDMI线支持的分辨率。了解物理大屏分辨率,确定设计稿尺寸。
原型设计
确认展示需求之后,我们要梳理大屏展示的关键指标,一般情况下,一个指标在大屏上独占一块区域,所以通过关键指标定义,我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。确定关键指标后,根据业务需求拟定展示指标的布局。
提供几个常用的大屏布局样式:
(1)左右分布
(2)中心环绕
(3)上下布局
拟定展示指标的布局后,需要和业务方进行确认。业务方同意后,再设计图表的样式,交互功能,如钻取、联动、轮播等,根据排版好的内容落地成原型图。
效果图设计
原型图确认后,需要美工需要结合屏幕尺寸、分辨率、大屏的风格来设计效果图。对于大屏而言,效果图主要对大屏的指标、数据、预期效果进行整理输出。
效果落地
根据效果图在前端制作大屏,一般有两种方式,一是用代码开发,还有一种是用现成的可视化工具制作。
用的比较多的就是JS+Echarts,但数据量支撑、后台响应、实时更新、平台运维等应该还要调用更多的技术,非常考验技术水平。
在制作大屏时,可以选择各平台提供的行业模板,在模板的基础上进行修改设计,节省制作大屏的人力、周期。