如何做一张科技感、实用性兼备的大屏?

不光有案例,还有来自项目组的黑科技。
文 | 帆软项目组 徐焕东

  • 项目背景

提到可视化大屏,我们脑海中往往会有两个词:动态直观、统筹监控
很多企业和团队在开展大屏项目的时候都是基于这两个词,基本诉求也就是两个部分:
  • 对内,要监控公司运营,实时统筹全局掌握关键数据;
  • 对外,要为客户展示公司运行情况,从未维护客户关系,增强信任;

因此,大屏不仅要求做到视觉上美观炫目,更要突出与数据契合的科技感,方便查看数据,使需要被关注的重点突出,而更多时候我们在视觉、数据方面有会更高的要求,需要大屏美观与实用性并存:在视觉方面,需要不同大屏的排版标新立异,所用素材与数据体现形式不可重复;在数据方面,高层领导对大屏的要求更侧重实用性和实时性,且对指标的摆放顺序有独到的见解。

一言概之,老板的需求简单明了:“我要5张大屏,展现科技感、亦兼具实用性、实时性。

  • 大屏经验分享

作为第一批使用10.0及扩展图表的项目,这次大屏效果在同行业内部交流过程中反响不错,在这次大屏的开发过程中,我亦总结了一些独家的大屏技巧略作分享。这次大屏效果在同行业内部交流过程中反响不错,在这次大屏的开发过程中,我亦总结了一些独家的大屏技巧略作分享。
首先要说一下我们制作大屏使用的工具——FineReport10.0,是采用最新的可视化大屏图表,默认采用深色背景+荧光配色,非常符合浸入式的大屏体验;而且能根据图表类型和数据要求,提供 '轮播'或'刷新'两种动画形式,能够满足不同场景下的业务需求。

同时FineReport10.0最厉害之处,在于它基于webgl等技术,对动画不断优化调整,能让做出来的效果更加简洁炫酷。

截图201908021003162731.png
一、灵活使用图片修饰
1)插入系列法
概述:让图表摆脱常见的柱形填充效果,通过自选的图片丰富大屏的创意。
操作:在图表->系列->样式中,将已经设计好的图片作为要素填充进图表中。

截图201908021003428025.png

2)背景图修饰法

概述:灵活使用绝对布局,通过报表快叠加美化图表效果。

截图201908021004052559.png


应用场景举例:客户想要一个这样的仪表盘(左图1),在10.0的仪表盘不符合客户需求的情况下,应用了360度仪表盘实现了类似效果(右图1),后经过修改,利用仪表盘上方叠加饼图的方式实现了最终效果(右图2)。

截图201908021004335932.png


二、散点图、气泡图也能玩出花
思路:
1)灵活使用组合图的各个图表组合。
2)对于分类数已知的图表来说,可把每个分类当做一个图表来单独设计,能灵活设置颜色、背景、提示点位置。

截图201908021005465994.png

三、图表的“创新”

概述:通过设计师设计的图片作为背景来拓宽图表样式,实现3D柱形图、3D圆环图等效果
步骤:
1.    设计师设计自定义图片,图片为具有一定特效的图表,把数据去掉。
2.    通过上文提到的报表块叠加,将图片作为底层背景,上层叠加数据,即可实现自制图表效果。

截图201908021022378849.png

截图201908021022536631.png

四、自定义地图
概述:通过自定义图片作为地图背景,重新描点形成json文件,实现地图的3D倾斜效果。
步骤:
1.设计师设计自定义地图,输出地图图片(压缩到1M以内最好,不然加载太慢)2.设计器点击服务器->地图数据,进入地图编辑页面,自建自定义地图,放入压缩好的图片
3.对地图描点,根据实际业务情况描点(可按省份描也可按大区描)
4.保存json文件,重启设计器即可在地图图层中选到自定义地图。


截图201908021023209246.png

  • 落地效果

1.首页

首页分析了银行整体的信贷质量、存贷款、不良贷款情况。

截图201908021007456870.png

2. 对公二级屏
对公二级屏分析商业银行比较重视的公司业务的风险情况,包括贷款余额情况、逾期率、不良率、已暴露风险趋势等核心指标。

截图201908021009284948.png

3.零售二级屏

零售二级屏分析零售业务比较关注的风险指标,主要包括零售业务余额、不良贷款余额,个人贷款余额、信用卡余额等。

截图201908021014482182.png

4.金融市场二级屏

金融市场二级屏分析金融市场业务比较关注的风险监测指标,主要包括金融市场业务余额、贷款余额分布、自营业务余额、理财业务余额、贷款变动趋势等。

截图201908021015419099.png

5.实时监控屏
实时监控屏相较于前四屏,本屏重在数据的实时监控,监控的预警客户数、大额交易记录也具有较强时效性。

截图201908021016443866.png

  • 总结

本次大屏项目最终通过大屏来展现整个项目集的成果,直观且震撼,若您也渐渐不满足于传统的固化报表,想要通过更直观动态的数据来做业务决策,却不知大数据项目该如何下手,可咨询帆软专业的项目实施团队,帮助企业完成从需求分析、方案设计、项目落地、运维的全生命周期服务,想要了解更多可直接点击提交项目服务意向 - 帆软,1分钟就可得到专业的服务咨询。

发表于 2019-8-2 10:33:58
发表于 2019-8-2 11:19:13
太炫酷了 饭团也想学!
发表于 2019-8-2 11:43:40
厉害


发表于 2019-8-2 13:40:39
酷炫D炸天,仅次于我
发表于 2019-8-2 14:45:16
发表于 2019-8-2 14:52:18
都是大佬!
发表于 2019-8-3 08:10:19
666666
发表于 2019-8-3 15:44:44
发表于 2019-8-5 08:12:24
期待模板分享
发表于 2019-8-5 11:24:38
大佬厉害
发表于 2019-8-5 17:59:55
发表于 2019-8-5 18:00:18
太厉害了
发表于 2019-8-5 21:30:26
发表于 2019-8-6 08:10:52
发表于 2019-8-6 09:00:07
我就想知道这个你加了点点什么进去
发表于 2019-8-6 11:52:05
66666
发表于 2019-8-6 16:37:14
发表于 2019-8-13 14:36:38
好强啊
发表于 2019-8-27 07:49:44
炫酷,想学习
发表于 2020-1-9 14:54:45
那右边这个又是怎么做成的?
发表于 2020-4-7 17:58:13
给力,学习了
发表于 2020-10-20 18:03:28
大佬,我对大屏很感兴趣。能想你学习下么?
发表于 2021-1-14 11:32:05
非常好的案例,请问可以共享一下图片吗?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

36回帖数 5关注人数 15182浏览人数
最后回复于:2021-1-14 11:32

返回顶部 返回列表