DataV实践:创建迪士尼乐园实况大屏

2023-10-13 15:20

本文主要是介绍DataV实践:创建迪士尼乐园实况大屏,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


我是一个迪士尼乐园的爱好者,我想拥有一块大屏能实时显示迪士尼乐园的情况,以便我觉得今天去不去乐园,去乐园玩什么项目。。。

数据来源

我写了一个抓包的程序,每天获取一次乐园运营数据(项目开放时间,状态灯),每5分钟获取一次乐园实况数据(排队时间、客流量等)

现在用的还是Mysql存储,计划转Redius,运行了快一年了,数据量太大性能越来越差~

关于DataV


DataV 是阿里云出品的一款数据可视化应用,可以通过图形可视化的界面快速搭建专业旨让更多的人看到数据可视化的魅力。


一般应用在交易大厅,展览中心,管控中心,老板办公室等等场景,把一些关键数据集中展示在一块巨大的LED屏幕上,其实就是巨大化的Dashboard,是当今数一数二的装逼方式!

开始制作

进入[https://datav.aliyun.com]()官网。
我购买的是基础版,51一年,不是很贵,功能对当前需求够用。

布局规划


可以先借助草图工具规划一下:

  1. 顶部设计:因为是实时大屏,时间必不可少,顶部为时间 - 标题 - Logo 的布局
  2. 左侧设计:乐园客流量趋势,乐园主题园区热度,显示乐园和各个主题园区的热门情况
  3. 中间设计:上部分为轮播所有项目的等待时间+演出项目的时间表,下部分用柱状图显示核心项目的排队时间
  4. 右侧设计:乐园平均等待时间 + 热门项目等待时间 + 乐园指数,显示乐园整体和热门项目的情况

选择模板


DataV提供了多套模板针对不同的场景,这里第一个就非常适合这一套项目

选择创建大屏进入编辑界面

顶部制作


选择辅助图形 - 添加时间器,再给标题加个边框,再加个Logo,2分钟完成!

左侧制作

实施客流量:

选择一个线框图或者新建一个

然后进入图表设置,选择数据这里我们使用Api,

这里的Api必须返回的必须是直接数据,如{data:{},result:1} 这样就不行

下面这是我们从服务器读到的数据

[{"num": 10730,"utime": "08:30"},{"num": 10730,"utime": "08:45"}...
]

然后我们进行字段映射,将x(x轴)匹配为utime,y(y轴)匹配为num(数值)这样图表就更新了!


我们还可以设置自动更新定时刷新图表

进入样式设置:可对图表进行个性化定制,这些基本上手就会我就不一一说明了,这里重点说下数据配置->数据增量这个设置,这个勾选后可将数据进行截取一部分,比如说我的api返回的是当前一天的数据流,我的图表只要最近3小时,则可以设置最大容量进行截取

主题园区热度:

这个图表反应各个园区的热度 ,展示的就是每个主题园区所有项目的排队时间总和

选择常规图表->柱状图->胶囊图


数据配置和上图一样,这里字段映射需要增加一个类目(就是每个项目包含的哪个主题园区)

进入样式设置:在数据系列中设置下每个项目的不同的颜色

中间制作

等待时间/演出时间表

选择文字->轮播列表新建

数据配置同上,但这里不需要进行字段映射

\\数据响应结果
[{"name": "翱翔•飞越地平线","id": "attSoaringOverHorizon","start_time": "8:00","end_time": "20:30","status": "Operating","type": 2,"fpTime": 0,"postedWaitMinutes": 180,"fastPassStartTime": 0,"fastPass": 1,"is_host": 1,"lng": "121.6717021420","lat": "31.1498546788","mapShow": false,"disance": 0},...
]

进入样式设置,选择自定义列可配置需要展示的数据,这里只要添加两项,名称和排队时间

演出时间表的配置和项目等待时间一样

然后在下面创建一个等待时间垂直柱状图,这样可以更直观的显示哪个项目人数最多,配置同上

右侧制作

右侧的制作和左侧一样,就不一一讲解了。

完成效果

附上我的小书房,这下抬头就可以看到乐园的实况,是不是很方便呢!


附上我的微信,欢迎喜欢迪士尼和前后端的一起交流!

这篇关于DataV实践:创建迪士尼乐园实况大屏的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/204106

相关文章

Spring Security简介、使用与最佳实践

《SpringSecurity简介、使用与最佳实践》SpringSecurity是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架,本文给大家介绍SpringSec... 目录一、如何理解 Spring Security?—— 核心思想二、如何在 Java 项目中使用?——

防止Linux rm命令误操作的多场景防护方案与实践

《防止Linuxrm命令误操作的多场景防护方案与实践》在Linux系统中,rm命令是删除文件和目录的高效工具,但一旦误操作,如执行rm-rf/或rm-rf/*,极易导致系统数据灾难,本文针对不同场景... 目录引言理解 rm 命令及误操作风险rm 命令基础常见误操作案例防护方案使用 rm编程 别名及安全删除

C++统计函数执行时间的最佳实践

《C++统计函数执行时间的最佳实践》在软件开发过程中,性能分析是优化程序的重要环节,了解函数的执行时间分布对于识别性能瓶颈至关重要,本文将分享一个C++函数执行时间统计工具,希望对大家有所帮助... 目录前言工具特性核心设计1. 数据结构设计2. 单例模式管理器3. RAII自动计时使用方法基本用法高级用法

PHP应用中处理限流和API节流的最佳实践

《PHP应用中处理限流和API节流的最佳实践》限流和API节流对于确保Web应用程序的可靠性、安全性和可扩展性至关重要,本文将详细介绍PHP应用中处理限流和API节流的最佳实践,下面就来和小编一起学习... 目录限流的重要性在 php 中实施限流的最佳实践使用集中式存储进行状态管理(如 Redis)采用滑动

ShardingProxy读写分离之原理、配置与实践过程

《ShardingProxy读写分离之原理、配置与实践过程》ShardingProxy是ApacheShardingSphere的数据库中间件,通过三层架构实现读写分离,解决高并发场景下数据库性能瓶... 目录一、ShardingProxy技术定位与读写分离核心价值1.1 技术定位1.2 读写分离核心价值二

深入浅出Spring中的@Autowired自动注入的工作原理及实践应用

《深入浅出Spring中的@Autowired自动注入的工作原理及实践应用》在Spring框架的学习旅程中,@Autowired无疑是一个高频出现却又让初学者头疼的注解,它看似简单,却蕴含着Sprin... 目录深入浅出Spring中的@Autowired:自动注入的奥秘什么是依赖注入?@Autowired

MySQL分库分表的实践示例

《MySQL分库分表的实践示例》MySQL分库分表适用于数据量大或并发压力高的场景,核心技术包括水平/垂直分片和分库,需应对分布式事务、跨库查询等挑战,通过中间件和解决方案实现,最佳实践为合理策略、备... 目录一、分库分表的触发条件1.1 数据量阈值1.2 并发压力二、分库分表的核心技术模块2.1 水平分

Spring创建Bean的八种主要方式详解

《Spring创建Bean的八种主要方式详解》Spring(尤其是SpringBoot)提供了多种方式来让容器创建和管理Bean,@Component、@Configuration+@Bean、@En... 目录引言一、Spring 创建 Bean 的 8 种主要方式1. @Component 及其衍生注解

SpringBoot通过main方法启动web项目实践

《SpringBoot通过main方法启动web项目实践》SpringBoot通过SpringApplication.run()启动Web项目,自动推断应用类型,加载初始化器与监听器,配置Spring... 目录1. 启动入口:SpringApplication.run()2. SpringApplicat

Java整合Protocol Buffers实现高效数据序列化实践

《Java整合ProtocolBuffers实现高效数据序列化实践》ProtocolBuffers是Google开发的一种语言中立、平台中立、可扩展的结构化数据序列化机制,类似于XML但更小、更快... 目录一、Protocol Buffers简介1.1 什么是Protocol Buffers1.2 Pro