可视化驾驶舱制作教程详解,手把手教你做一张大屏
最近各大高校都陆续开学,前阵子微博各种晒录取通知书,现在又开始晒起了开学第一天,朋友圈刷到一个亲戚家的孩子晒了一张学校做的迎新数据大屏,将各学院报道数据实时展现的大屏幕上,吸引了不少学生家长围观,体现了学校的科技实力。
既然说到可视化大屏,必然是我很感兴趣的了,于是上网搜了关于高校迎新大屏的资料,发现可视化大屏驾驶舱在高校数据应用中很火爆,于是找来了一些高校招生数据,自己动手做了一张简单的开学迎新大屏,教程分享给大家。( 数据集及源文件获取方式见文末)
先来看几张高校迎新大屏:
西北工业大学
浙江农林大学
数据有限,大概做了这样一个迎新大屏:
制作步骤
教程直讲可视化demo的制作过程,硬件部分不涉及
1、确定主题及展示指标
在设计可视化驾驶舱或大屏的时候,我们第一步要先确定我们大屏/驾驶舱的主题,然后列出我们想要在这张大屏上想要展示的数据指标和分析维度
主题: 学校迎新大屏 ,通过对学校招生数据以及教职工数据分析,向新生展示学校招生情况及学校师资力量、办学能力
分析维度:
- 各省份新招生人数分析
- 历年各省招生情况分析
- 迎新师资队伍
- 师资力量分析
- 办学规模分析
- 历年本科升学率趋势分析
- 学校经费支出结构分析
- 在校学生学历结构分析
2、根据数据关系选择合适图表
根据数据之间的关系选择合适的图表,可以参照下面这张经典的图:
3、驾驶舱排版设计
根据确定好的分析指标进行排版,排版要注意主次分明,让读者一眼看到重点信息,提高信息传递的效率,把核心展现指标放在中间位置、占较大面积,一般都会将动态效果丰富的地图放在主要位置,抓住读者眼球,次要指标放在屏幕两侧。还有一些辅助分析的内容,可以通过图表联动、钻取体现。
可以参考如下几种布局方式:
我的布局:
4、可视化模板制作
模板的制作,我用的 FineReport ,做可视化大屏非常专业,基本上不用写什么代码就能开发可视化大屏,算是一个低代码的报表开发平台吧。
话不多说,上教程:打开finereport,新建一张决策报表:
新建数据集,就是用sql查询语句从数据库中取出数据,可以添加数据库数据,也可以直接上传文件数据集,定义地区参数,关联历年各省招生数和各省分招生数(实现数据联动),其他的取数语句我就不一一列出来,大家应该都会,不会的自己到源文件里看
决策报表采用的是画布式布局,可以拖拽随意布局,根据之前设计的布局排版将所有图表组件按照布局设计顺序拖放到对应位置:
这里面我用到了两个图表插件, 滚动字幕和数字时钟插件, 大家可以在插件商城免费下载,点击服务器>插件管理
滚动字幕效果和数据时钟效果:(不是很清楚)
然后分别给图表组件设置类型、数据、样式、特效,以中间的地图设置为例:
其他图表组件的数据和效果设置可以在源文件里看,我这里就不赘述了
到这一步,基本上驾驶舱的雏形就做完了,然后我们可以对背景、图表配色细节进行美化,背景可以选择颜色或者是图片背景,做的匆忙我就没高兴找背景图,直接用的颜色,点击body>样式 进行设置
为了更好的视觉效果我们还可以给图表添加主题边框,增加大屏科技感,比如我们的大屏主题:
点击标题背景块>属性>样式,上传图片设置:
最后保存模板,点击预览,效果如下:
大屏制作工具及教程:
大屏素材:
最后分享一些相关资料: