制作步骤
教程只讲可视化demo的制作过程,硬件部分不涉及
1、确定主题及展示指标
在设计可视化驾驶舱或大屏的时候,我们第一步要先确定我们大屏/驾驶舱的主题,然后列出我们想要在这张大屏上想要展示的数据指标和分析维度
驾驶舱主要包括:管理驾驶舱、业务管理驾驶舱、专项管理驾驶舱
战略驾驶舱:战略型驾驶舱的作用主要是让使用者快速掌握企业的运营情况,并据此快速做出决策,对过去做出总结或是对未来拟定战略性目标
分析型驾驶舱:分析型驾驶舱的作用主要是让管理者不仅可以看到到表层的信息,还可以深入探究表层现象发生的原因
通过钻取联动过滤等操作,从现象出发,沿着数据的脉络去寻找原因。比如销售业绩为什么下降,回款时间长的原因又是什么
专项管理驾驶舱:操作型驾驶舱强调持续、实时的信息汇报。
2、掌握决策报表操作基础
在FineReport中,大屏和驾驶舱都是基于决策报表开发的,通过将不同的组件堆砌在页面中制作而成。
首先,我们打开finereport设计器的决策报表模式,新建决策报表,选择想要使用的图表组件(也可以选择图表组件或者参数组件)直接拖拽进面板上,然后可以进行进一步的编辑:
有了图表,但是我们还没有数据怎么办?很简单,只需要通过查询数据集,将想要进行分析展示的数据取出来,然后将其绑定给图表组件就OK了
比如你想要展示不同销售员的销量情况,就要将新建的数据集绑定给柱状图,然后选择合适的分类、系列名和系列值,这样基本上一个图表组件就完成了
掌握了用决策报表制作可视化组件后,驾驶舱制作也就迈出了第一步
3、拖拽图表组件布局
数据准备好之后,按照我们之前的排版布局图,把对应的图表组件拖拽到画布上
5、设置图表
到上一步,我们的驾驶舱雏形就出来了,然后再给每个图表组件绑定好数据源,设置好样式、特效,基本就差不多了
基础图表的设置很简单,我就不展示,给大家看一下数据地图设置:
6、大屏的原型及可视化设计
根据之前定好的业务指标进行排版:
主:核心业务指标安排在中间位置、占较大面积,多为动态效果丰富的地图
次:次要指标位于屏幕两侧,多为各类图
表辅:辅助分析的内容,可以通过钻取联动、轮播显示
一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率
视觉方面,一般会上设计师出一个效果图,确定排版布局和配色方案
最重要的是输出一些装饰组件,适当给标题、数字等添加一些诸如边框、图画等在内的点缀效果,能帮助提升整体美观度,然后再在FineReport中设计
7、配色
布局好之后下一步就是要进行配色,包括图表、背景、组件、数据等等,颜色越多,搭配的难度就越大
所以大多数的时候选择临近色系,颜色跨度在90°左右,当用对比强烈的颜色搭配时,要掌握好颜色的比例,大量的主色搭配少量的对比色
到这一步,基本上驾驶舱的雏形就做完了,然后我们可以对背景、图表配色细节进行美化
背景可以选择颜色或者是图片背景,做的匆忙我就没高兴找背景图,直接用的颜色,点击body>样式 进行设置
8、预览最终效果
上述设置完后,点击预览,一张科技感的可视化驾驶舱就完成了:
除了一些基础的可视化图表之外,这个软件还提供很多炫酷动态的图表组件,可以实现自动播放、3D动画特效等多种效果,多维度地展示数据,提升驾驶舱科技感
另外,一些创意元素的应用能够让可视化驾驶舱更加生动,比如,假如我们要做一个航空管理驾驶舱,就可以利用一些飞机图标、图画之类的拟物效果,让驾驶舱效果更加灵动!