程序员加班一周总结出可视化大屏效果,9种炫酷组件打包带走!

前段时间参加行业分享交流会,听各位大佬的经验传授,其中有一位用一个极度炫酷的可视化大屏进行展示,可谓是让人眼前一亮。我总是在冲浪的时候看到大屏内容,现场的亲眼目睹大屏真是无比震撼的,于是我马上抓住机会向人家取取经,这到底如何呈现的。我回来研究很久,花了好几天时间整理出这9种大屏较常见的应用场景,毕竟是行业前端人物都在用的工具,有什么理由不收藏呢!

在大屏需求规划阶段,我们就要了解清楚大屏的使用方式,分析展示需求,决定大屏是否需要一些动态效果。

本篇分享所指的动态效果均为大屏上自动的动态效果,即不需要人为操作就可以展示在大屏上,以下是应用场景分享!

应用场景

1、图表轮播
使用场景:

图表轮播是帆软图表中内置的功能,其作用是在同一区域轮播显示两个以上图表,图表之间有一定的关联关系或共同组成一个小的主题模块。

如下模板中,有三组图表自动轮播的效果。每组轮播中都有相关的两个图表,如“整体情况-去年”、“整体情况-今年”分别描述了托管规模与收入的整体情况。
在这里插入图片描述

正常情况下,图表自动轮播,若需要单独关注某个图表,可将鼠标悬浮在图表上,让轮播暂停。
在这里插入图片描述

自动轮播更适合参观展示大屏场景,也可以添加按钮做手动轮播,在驾驶舱大屏中有较多的应用场景:

在这里插入图片描述

2、tab页轮播
使用场景:

tab页轮播可以轮播多个组件或组件的组合,不限于轮播图表。tab轮播可以是自动的,也可以是手动点击tab标签切换。tab页轮播的使用可以让大屏展示的信息更丰富,同时不会让大屏内容显得杂乱无章。

如下图的模板中,A、B、C三个校区的人员占比、人员健康数据分别在三个tab页中,在大屏上轮播展示,同时也可以手动切换。
在这里插入图片描述

3、tab块实现模板轮播
使用场景:

模板轮播在大屏上也是常见的需求,以驾驶舱大屏为例,领导需要在会议室电视机上查看的数据可能不止某一方面,门店运营数据、销售回款数据等都要关注,而一张大屏无法排布这么多的数据指标时,通常可以制作多张大屏,用轮播的效果展示。

以下图中的模板为例,一共有3张模板要轮播,结合了场景地图自带的场景切换按钮,在切换或轮播场景的同时轮播了模板,整个模板形成了逻辑上的连贯,同时又展示了三张模板的信息。
在这里插入图片描述

4、图表数据提示点轮播
使用场景:

为了大屏视觉设计的美观整洁,我们通常隐藏掉了大量的图表标签,但又希望图表信息展示全面,此时可以使用图表数据提示点轮播的方式,依次轮播图表中每个系列的具体数值。

如下图中的模板,为了大屏美观我们使用了扩展图表中的特殊形状柱形图,并隐藏掉标签,使用图表数据点轮播提示,让图表具体数据也能被展示出来。
在这里插入图片描述

5、地图数据提示点轮播
使用场景:

当地图上有密集的区域和数据标签时,不宜展示所有数据点,但完全不展示具体数据会遗漏很多信息,此时,地图数据点轮播提示是一个很好的功能应用。

在下图的模板中,依次遍历了山东省每个市的高速收费数据,既保留了整洁美观的视觉感,又通过轮播引导观看者了解每个市区的信息。
在这里插入图片描述

如果使用的地图是扩展图表中的类别,那么轮播gis点地图和场景地图的轮播效果比普通地图更有场景感。
在这里插入图片描述

6、表格跑马灯效果
使用场景:

表格是大屏上常见的元素,但表格在大屏上的面积占比不宜过大,那么表格信息无法展示全的时候,就可以应用表格滚动效果(3形式像跑马灯)。

如下图中的模板,产品销售排名明细表中,需要展示的产品记录数超过表格高度,使用表格跑马灯效果使数据能展示完全。
在这里插入图片描述

7、滚动消息
使用场景:

滚动消息用于显示一条多多条消息文本,文本数据是静态的,不需要起到监控、分析等效果,但同样需要引起观看者的注意。以滚动的形式展示即不需要太大的空间,又可以通过动态效果引起注意。
在这里插入图片描述

8、图表闪烁动画
使用场景:

图表闪烁动画用于对图表中异常或需要特别关注的数据系列突出显示,用闪烁+警示色的效果,让图形更突出,是监控类看板中常用效果。

如下图中的模板,对监控用的图表设置一条警戒线,同时对低于警戒线数值的系列设置条件变色和闪烁动画效果,让异常的数据突出显示。
在这里插入图片描述

9、文本条件变色
使用场景:

文本条件变色主要用于对某些特别关注的数据做实时监控,可设置对表格中的数据和指标卡中的数值设置此类条件。

如下图中的模板,对“今日来访园区”表格设置了条件属性变色,若来访者体温字段的数值超过37.0,该行数据会变色,在大屏上起到警示效果。
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Leo.yuan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值