零基础怎么玩转可视化大屏?这个工具只需5步!

大屏可视化怎么这么火?领导天天要,业务人员、开发人员、IT页面师就得一块熬夜加班,要是不会做大屏,都不好意思说自己做报表、做IT。

也许有人会告诉你,可视化大屏可以用JS+Ecahrts编程实现,但是对于编程零基础的小白来说,显然有些太困难了。更何况一旦数据口径改变,或者数据量多,需要对接系统,就要写代码调整,麻烦至极。

那么,有没有一种简单高效、还能快速上手的可视化工具,可以随时现拿现用,做出酷炫的大屏呢?

当然有!小编这次介绍的工具就能够实现零编码基础快速制作可视化大屏,话不多说先上图:

好了,小编就不卖关子了,这个工具就是零编码开发报表工具FineReport,这个工具除了能解决业务报表制作和数据化管理问题,还同样被用来可视化展示,大屏就是其中之一。

大屏看起来很炫,那么制作会不会很麻烦呢?下面给大家演示一下,如何快速用FineReport做出简单酷炫的可视化大屏模板。

一、 准备工作

确认需求、准备数据、整理素材。这里假定需求已由业务部敲定,数据IT部也整理好了,而需要的背景图片、边框等事先都整理完毕。

设计大屏驾驶舱遵循四个基本步骤:

布局排版 ——色彩 —— 点缀效果 ——动画。

二、 布局排版

业务部门的需求,是要重点展现集团销售总额数据以及各地区的数据,其他次要内容包括历年销售对比、各产品线销售、热门产品、实时交易、新老客户占比等。我们从常见的几种主次分布排版样式里挑选了一种作为此次的版面,如下图所示:

由于集团业务遍布全国,所以区域销售数据我们认为用地图展示比较直观,而全国的总销售额这一数字叠加在地图上进行展示。另外,对比类的数据适合用柱形图,占比类的数据适合用饼图,交易明细数据适合用表格。这样,我们就确定了布局里的几个主要元素:地图、数字、柱形图、饼图、表格。

由于这里报表块使用了重叠的功能,因此需要使用绝对布局,如下图:

打开 FineReport 设计器,按照布局样式,从组件栏拖入对应的图表元素到指定区域并绑定数据,如下图所示:

点击预览按钮,浏览器端的效果如下图所示。到这里第一版效果就出来了,主次排版让界面看上去很规范,但配色没有经过改良所以效果一般。

三、色彩

在上次帖子里,我们总结过,大屏的主体背景建议用深色系,这样可以有效避免视觉刺激。如此,我们把第一版demo背景换成背景图片,由于整体背景是深色的,使得我们的一些标题文字还看上去不明显,而且图表有种沉闷的感觉,稍微调整了下,把文字内容改成浅色、图表则换稍微明亮一点的颜色,如下图:

四、点缀

接下来为各个组件、标题添加一些边框来提升细节处的观感。

1、首先是顶部大标题,在大标题两侧各拖入一个报表块,为报表块添加背景图片,左右对称线条极大提升美感。

2、其次是改造各个组件的小标题,方直接为小标题所在的报表块组件添加合适的背景。

3、给各个组件添加边框元素,最后得到效果如下:

五、动效

由于大屏本身场景特殊,纯粹静态展示让人感觉大屏缺乏活力。为此,给demo加上一些动画效果,提升一下demo的活力及视觉观感。

1、首先我们来为销售总额设置数据监控(需要安装决策报表里报表块刷新插件),让其每隔1秒获取最新数据,这样销售总额数字会实时动态变化,设置如下图:

效果如下图:

2、再给图表添加闪烁动画,设置如下图:

效果如下图:

3、给地图添加一个数据监控,让各区域变化的数据在地图上自动显示数据点提示,设置如下图:

效果如下图:

4、右下角的明细数据展示,改成滚动轮播的形式,效果如下图:

直到这里就大屏制作就完成了!

小结

用FineReport制作一张简单的可视化大屏并不是难事,最关键地是针对企业运营的性质,找到关键指标,让领导看到想要看到的数据价值,这才是制作可视化大屏最重要的一步。

同时,工欲善其事,必先利其器,一个好的可视化工具能够让大屏制作事半功倍。FineReport大屏可视化能够满足日益复杂的数据分析要求,上手速度快,完全实现零编码,大大减少了可视化成本,真正实现人人都是数据师。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,165评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,720评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,849评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,245评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,596评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,747评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,977评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,708评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,448评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,657评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,141评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,493评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,153评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,890评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,799评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,685评论 2 272

推荐阅读更多精彩内容

  • 最近在实际项目中积累了一些经验,以及看到很多大神们的分享,不断学习和丰富关于大屏设计的特点及数据可视化的表达方式。...
    Babystar0905阅读 38,488评论 7 233
  • 看着满地的落叶,总是不由自主的落入悲伤之境。我是一个多愁善感之人,外物的一切变化和自我的得失总是会影响到我。我做不...
    失必多言阅读 218评论 0 1
  • 在那之前,我曾一个人 浪荡在这人世间 先行者们,从太阳深处飘来 白马金鞍,他们背着胡须 面容疏朗,眼神湿润 行囊里...
    少年饭桃花阅读 449评论 12 12
  • 自己做了近一年半的假妈妈,这两天希望能拯救一下,开始和女儿长时间全方位无死角360度亲密接触。有些事情确实受打击。...
    舒昶舒畅阅读 402评论 5 3
  • 潘蔚20190412日精进打卡 一、感恩 感谢大家一起讨论问题 感谢同事旅游带回来的特产 感谢同事带我回家 感谢邻...
    BOOpan阅读 66评论 0 0