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

news2025/1/21 1:04:22

前段时间参加行业分享交流会,听各位大佬的经验传授,其中有一位用一个极度炫酷的可视化大屏进行展示,可谓是让人眼前一亮。我总是在冲浪的时候看到大屏内容,现场的亲眼目睹大屏真是无比震撼的,于是我马上抓住机会向人家取取经,这到底如何呈现的。我回来研究很久,花了好几天时间整理出这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,该行数据会变色,在大屏上起到警示效果。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/527538.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Quarkus + mybatis + mybatis-generator 使用总结

Quarkus mybatis mybatis-generator 使用总结 大纲 1 Quarkus结合mybatis 2 Quarkus手动配置数据源 3 Quarkusmybatis的使用 4 使用mybatis-generate 5 使用mybatis-generate后的问题 基础说明 1 开发环境 window112 GraalVM 版本22.3.0 3 quarkus 版本 2.13.7.Final4 myb…

【小韬讲存储】——自动精简配置

ChatGPT全球大火 网友们纷纷登陆尝试它的功能 面对五花八门的问题,ChatGPT都能够给出高情商答案 而答案的背后是百TB数据的分析、训练 对于百TB测试数据 企业不会选择一次性购买所需硬件 而是根据实际所需容量进行多次购买 产品背后的百TB数据容量压力 在当前…

火山引擎DataTester:A/B实验平台数据集成技术分享

DataTester的数据集成系统,可大幅降低企业接入A/B实验平台门槛。 当企业想要接入一套A/B实验平台的时候,常常会遇到这样的问题: 企业已经有一套埋点系统了,增加A/B实验平台的话需要重复做一遍埋点,费时费力&#xff1b…

Android Jetpack Compose中derivedStateOf{}与remember{} with keys的区别

Android Jetpack Compose中derivedStateOf{}与remember{} with keys的区别 在这篇短文中,我将清楚地解释derivedStateOf{}和使用带有keys的remember{}之间的区别。阅读完本文后,你将对它们之间的区别有非常清晰的认识。 先决条件 为了理解本文&#xf…

Java实现自定义字段

Java自定义字段 小黄最近在工作中遇到一个比较有意思的需求,在此跟大家分享一下 需求 这个需求是这样的,用户在添加表单时,除了一些固定信息填入之外,还可以自定义一些字段填入,例如一个用户表,默认情况下…

集文字查询、语音识别、拍照识别的垃圾分类系统,多端合一

一、开源项目简介 垃圾识别精灵 是一个 基于 uni-app 开发 微信小程序,使用 SpringBoot2 搭建后端服务,使用 Swagger2 构建 Restful 接口文档,实现了 文字查询、语音识别、图像识别其垃圾分类的功能。 这是一款个人开发的微信小程序&#x…

Python系列之变量和运算符

目录 一、变量 1.1 什么是变量 1.2 变量的特点 1.3 作用域 1.4 变量的命名规则 1.5 变量的定义和使用 1. 变量的定义 2. 两个变量值的交换 1.6 基本数据类型分类 1.7 数据类型转换 1.8 Python是解释型的强类型动态语言 1.8.1 解释型 1.8.2 强类型 1.8.2 动态语言…

Vue3系列——Pinia状态管理库

目录 Pinia 安装、创建 Store 定义Store Option Store Setup Store 使用Store storeToRefs action异步实现 Pinia Pinia是Vue的专属状态管理库,它允许跨组件或页面共享状态,实现和Vuex一样的数据共享,是Vuex状态管理工具的替代品。…

【直播回顾】AIGC产业研究报告2023图像生成篇报告解读

易观:5月9日,易观高级分析师陈晨带来了《AIGC产业研究报告2023图像生成篇》的报告解读,错过直播的朋友敬请观看回顾! 图像作为人工智能内容生成的一种模态,一直在AIGC领域中扮演着重要角色,由于图像生成应用…

1135 Is It A Red-Black Tree(超详细注释+46行代码)

1135 Is It A Red-Black Tree 分数 30 全屏浏览题目 切换布局 作者 CHEN, Yue 单位 浙江大学 There is a kind of balanced binary search tree named red-black tree in the data structure. It has the following 5 properties: (1) Every node is either red or blac…

【C++】类和对象(中)---拷贝构造函数、赋值运算符重载

个人主页:平行线也会相交💪 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 平行线也会相交 原创 收录于专栏【C之路】💌 本专栏旨在记录C的学习路线,望对大家有所帮助🙇‍ 希望我们一起努力、成长&…

MySQL之MHA高可用集群及故障切换

目录 一、MHA概述1.1 MHA 的组成1.2 MHA 的特点1.3 MHA的工作原理1.4 故障切换时MHA会做什么 二、搭建MySQLMHA2.1 实验思路2.2 实验环境、安装包2.3 服务搭建2.3-1 所有服务器挂壁防火墙和安全增强2.3-2 修改 Master、Slave1、Slave2 节点的主机名2.3-3 修改三台MySQL服务器主…

『新星计划 • 数据结构与算法』数据结构学习指南以及在校招中的重要性

文章目录 💐文章导读💐导师自我介绍💐数据结构与算法的重要性🔓在岗位招聘中🔓在校招笔试中🔓在校招面试中🔓在未来工作中 💐数据结构与算法如何学习⤴️学习路线⤵️学习方法↪️几…

tinyWebServer 学习笔记——一、半同步半反应堆线程池

文章目录 一、基础知识1. 服务器编程基本框架2. 五种 I/O 模型3. 事件处理模式4. 半同步/半反应堆模式5. 线程池 二、代码解析1. 线程池类定义2. 线程池创建与回收3. 向请求队列中添加任务4. 线程处理函数5. run 执行任务 参考文献 一、基础知识 1. 服务器编程基本框架 服务器…

软件测试 自动化测试selenium篇(一)

目录 一、什么是自动化测试 单元测试 接口自动化 UI自动化 二、如何实施自动化测试 自动化测试需要了解的技能 三、selenium介绍 webdriver的工作原理: 四、SeleniumJava环境搭建 验证环境是否搭建成功 创建java项目,添加pom文件中添加依赖 常见问…

一些使用树莓派遇到的问题

在长达两个月的实习期,白天去公司实习,晚上回到实验室学习树莓派。终于简单的入门了。来做个总结。 目录 1. wifi问题 树莓派之wifi连接 2.vnc树莓派桌面问题 3.安装库或者下载东西时,域名无法解析。 4.进行安装或者操作时&#xff0c…

【Java多线程编程】解决线程的不安全问题之volatile关键字

目录 1. 造成线程不安全的代码 2. volatile能保证内存可见性 3. synchronized与volatile的区别 3.1 synchronized能保证原子性 3.2 volatile不能保证原子性 1. 造成线程不安全的代码 有一代码,要求两个线程运行。并自定义一个标志位 flag,当线程2&…

UVM学习——搭建简单的UVM平台

引言 本专栏的博客均与 UVM 的学习相关,学习参考: 【1】UVM Tutorial 【2】张强著,UVM实战 (卷 Ⅰ) 【3】Download UVM (Standard Universal Verification Methodology) 本专栏的学习基本依照 资料【2】的主线&#…

【机器学习】正规方程法求解线性回归问题

前情提要:https://blog.csdn.net/weixin_45434953/article/details/130604086 正规方程 正规方程能以更好的方式求得假设函数中 θ \theta θ的最优值。它提供了一种用于求 θ \theta θ的解析方法,而不是梯度下降那样的迭代方法。也就是只需要一次运算…

Microsoft Power BI连接本地mysql 数据库 !power bi提示此连接器需要安装一个或多个其他组件才能使用怎么办!

一、步骤 (一)从菜单栏点击进入mysql数据库 点击主页>获取数据>更多 选择mysql数据库,点击连接 (二)已经安装了mysql connector/net还是提示此连接器需要安装一个或多个其他组件才能使用-解决 重装了几次都…