反馈已提交

网络繁忙

大屏常见动态效果

  • 文档创建者:帆软可视化
  • 历史版本:9
  • 最近更新:Jolie 于 2022-07-18
  • 在大屏需求规划阶段,我们就要了解清楚大屏的使用方式,分析展示需求,决定大屏是否需要一些动态效果。

    本文所指的动态效果均为大屏上自动的动态效果,即不需要人为操作就可以展示在大屏上。


    一、学习资料归纳

    大屏常见的动态效果包括各种轮播、滚动和闪烁动画等,以下是学习资料归纳:

    动态效果分类动态效果帮助文档讲解视频
    轮播类

    图表轮播:
    自动轮播多个图表

    图表切换属性

    图表轮播

    tab页轮播:
    自动轮播多个tab页,tab页中可嵌入多个组件甚至嵌入大屏模板

    Tab块

    tab轮播

    tab轮播实现模板轮播

    图表数据提示点轮播:
    自动轮播图表每个系列的数据提示,不需要鼠标悬浮显示

    图表开启自动数据点提示轮播接口图表数据点轮播

    地图数据提示点轮播:
    自动轮播地图上每个数据点,不需要鼠标悬浮显示

    地图开启数据点提示轮播地图数据点轮播
    滚动类

    表格跑马灯效果:
    表格内容自动向上滚动的效果,类似跑马灯

    新自适应环境:决策报表JS使用(3.7-报表块跑马灯)

    旧自适应环境:JS实现决策报表中滚屏/跑马灯效果

    表格跑马灯效果

    滚动消息:
    实现文本滚动的字幕效果,一般只针对静态的消息文本

    滚动消息控件插件——
    闪烁动画类文本条件变色:

    指标卡或表格中的某值达到警示值时变色以引起重视

    单元格添加预警,间隔背景色——


    二、应用场景

    1、图表轮播


    使用场景:

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

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

    图表轮播示例模板.gif

    点击下载该示例模板:信托投资驾驶舱


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

    图表轮播示例组件.gif


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

    图表轮播切换.gif


    2、tab页轮播


    使用场景:

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


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

    tab轮播示例.gif

    点击下载该示例模板:学生健康状况分析大屏


    3、tab块实现模板轮播


    使用场景:

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


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

    模板轮播示例.gif

    点击下载该示例模板:食品零售集团销售数据驾驶舱


    4、图表数据提示点轮播


    使用场景:

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


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

    图表轮播提示点示例.gif

    点击下载该示例模板:酒店展示大屏(原模板无图表轮播效果,可根据帮助文档中的方法添加)


    5、地图数据提示点轮播


    使用场景:

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


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

    地图数据点轮播.gif

    点击下载该示例模板:高速监控大屏


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

    轮播gis点地图示例.gif

    点击下载该示例模板:工程建设作战指挥室


    6、表格跑马灯效果


    使用场景:

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


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

    表格滚动示例.gif

    点击下载该示例模板:帆软集团综合管理驾驶舱


    7、滚动消息


    使用场景:

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


    滚动字幕2.gif

    点击下载该示例模板:国有资产统筹平台


    8、图表闪烁动画


    使用场景:

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


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

    图表闪烁动画示例.gif

    点击下载该示例模板:生产监控看板


    9、文本条件变色


    使用场景:

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


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

    表格文本变色警示.gif

    点击下载该示例模板:公司防疫复工数据大屏

    附件列表


    主题: 功能场景案例
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持