当前位置: 首页 > news >正文

模板学堂丨妙用Tab组件制作多屏仪表板并实现自动轮播

DataEase开源数据可视化分析平台于2022年6月正式发布模板市场(https://dataease.io/templates/)。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板,方便用户根据自身的业务需求和使用场景选择对应的仪表板模板,并在优质模板的基础上轻松制作自己的仪表板。

2023年2月上新模板

DataEase模板市场定期进行模板上新。2023年2月共上新5个模板,涉及能源、测试、采购、消费等主题,欢迎大家在DataEase模板市场下载使用。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

模板技巧

本月为大家推荐的模板技巧是如何使用DataEase的选项卡组件(即Tab组件)实现多个大屏轮播的效果。

不少用户在实际使用DataEase时都会产生多个大屏同时使用并展现的需求,而给每个大屏配置一个单独的显示设备并不是一个现实的方法,那么就需要在一个显示设备上实现多个大屏轮播的效果。在DataEase开源数据可视化分析平台上,只需要简单的一个选项卡组件(即Tab组件),就可以轻松满足用户在大屏展示时多个仪表板并按照固定时间轮播的需求。

本次模板技巧涉及到的功能背景如下:

■ DataEase选项卡组件(即Tab组件)支持放入多个其他类型组件,可以在Tab组件中创作多个不同的仪表板;

■ 通过Tab组件的轮播功能可实现不同Tab页的轮播效果。

方法介绍

■ 方法一:将选项卡组件大小设置为与仪表板大小相同,将选项卡作为仪表板的画布来使用,在每个选项页下完成独立完整的仪表板的制作;

■ 方法二:将选项卡组件大小设置为与仪表板大小相同,再将网页组件放入到选项卡组件中,同样将大小设置为与仪表板页面相同大小,网页组件中配置对应已做好的仪表板公共链接。

操作演示

一、方法一操作过程

1.将选项卡组件拖入到仪表板中;
在这里插入图片描述

2.将选项卡组件的大小设置为与仪表板同样大小;
在这里插入图片描述

3.在每个Tab标签页下的空间中放入需要的各类视图和组件,制作完整的仪表板;
在这里插入图片描述

4.开启轮播,并配置轮播间隔时间;
在这里插入图片描述

5.预览仪表板,查看自动轮播效果。
在这里插入图片描述

二、方法二操作过程

方法二需要满足以下两个条件才可实现:

■ 各个需要轮播的仪表板均单独存在,且已制作完成;

■ 各个仪表板在安全性控制上支持创建公共链接,即可以通过创建的公共链接进行无密码访问。

1.将选项卡组件拖入到仪表板中;
在这里插入图片描述

2.将选项卡组件的大小设置为与仪表板同样大小;
在这里插入图片描述

3.在每个选项卡组件中放入一个网页组件,也将其大小调整为屏幕大小;
在这里插入图片描述

4.分别对想要统一轮播的仪表板创建公共链接,并配置在网页组件中;
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.开启轮播并配置轮播间隔时间;
在这里插入图片描述

6.预览仪表板,查看自动轮播效果。
在这里插入图片描述

总结

DataEase开源数据可视化分析工具中很多功能用法是具有多样性的。以选项卡组件轮播功能为例,除了上述用法外,您还可以通过在不同的Tab页下放置不同的图片实现图片轮播等效果。此外,关于实现大屏的轮播也有一些外部辅助的方式,例如通过Chrome浏览器的Revolver-Tabs插件来实现浏览器不同标签页的轮播效果。

DataEase致力于和大家一起探索新的功能和效果实现,通过持续的迭代做出更好的产品,满足个人和企业用户更为多元化的场景需求,努力实现“人人可用”的目标。

http://www.lryc.cn/news/32707.html

相关文章:

  • C++:初识函数模板和类模板
  • 3.8妇女节如何做好TikTok网红营销?
  • 使用Advanced Installer打包程序及运行环境
  • 华为OD机试真题Python实现【计算堆栈中的剩余数字】真题+解题思路+代码(20222023)
  • 企业文件数据泄露防护(DLP)
  • 不考虑分配与合并情况下,GO实现GCMarkSweep(标记清楚算法)
  • 利用HGT聚类单细胞多组学数据并推理生物网络
  • 杂记——18.VSCode的下载及使用
  • 【独家】华为OD机试 - 最少停车数(C 语言解题)
  • 顶级动漫IP加持之下,3A策略游戏Mechaverse如何改变GameFi
  • 一款丧心病狂的API测试工具:Apifox!
  • 【前端学习】D2-2:CSS基础
  • Flink / Scala 实战 - 19.ProcessFunction 删除 key 的上一个定时器 TimeTimer
  • MSTP基础
  • 当ChatGPT遇见stable-diffusion,你不敢相信的创意艺术之旅!
  • 一文搞定!postman接口自动化测试【附项目实战详解】
  • ctfshow【菜狗杯】wp
  • 旋转数组的几种做法
  • 创建虚拟机、添加镜像以及配置虚拟机
  • Godot Engine 4.0横空出世,Vulkan大怪兽加持,画质提升简直亮瞎眼
  • CorelDRAWX4的VBA插件开发(四十五)建立类(2)汇总相似功能简化重复代码:一键建立设计外框加出血线和等分折页线
  • 我的十年编程路 2017年篇
  • hadoop有多个输入路径怎么处理
  • day6 ServletContext
  • Dockerfile部署SpringBoot项目
  • Java面向对象特征之三:多态
  • 基于ATX自动化测试解决方案
  • Qt学习5-Qt Creator文件操作(哔站视频学习记录)
  • LeetCode15三数之和 容易理解版本
  • Spring Boot 3.0系列【11】核心特性篇之国际化