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

相关文章

Java 的ArrayList集合底层实现与最佳实践

《Java的ArrayList集合底层实现与最佳实践》本文主要介绍了Java的ArrayList集合类的核心概念、底层实现、关键成员变量、初始化机制、容量演变、扩容机制、性能分析、核心方法源码解析、... 目录1. 核心概念与底层实现1.1 ArrayList 的本质1.1.1 底层数据结构JDK 1.7

JDK21对虚拟线程的几种用法实践指南

《JDK21对虚拟线程的几种用法实践指南》虚拟线程是Java中的一种轻量级线程,由JVM管理,特别适合于I/O密集型任务,:本文主要介绍JDK21对虚拟线程的几种用法,文中通过代码介绍的非常详细,... 目录一、参考官方文档二、什么是虚拟线程三、几种用法1、Thread.ofVirtual().start(

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程?1.2 为什么需要虚拟线程?二、虚拟线程与平台线程对比代码对比示例:三

从基础到高级详解Go语言中错误处理的实践指南

《从基础到高级详解Go语言中错误处理的实践指南》Go语言采用了一种独特而明确的错误处理哲学,与其他主流编程语言形成鲜明对比,本文将为大家详细介绍Go语言中错误处理详细方法,希望对大家有所帮助... 目录1 Go 错误处理哲学与核心机制1.1 错误接口设计1.2 错误与异常的区别2 错误创建与检查2.1 基础

k8s按需创建PV和使用PVC详解

《k8s按需创建PV和使用PVC详解》Kubernetes中,PV和PVC用于管理持久存储,StorageClass实现动态PV分配,PVC声明存储需求并绑定PV,通过kubectl验证状态,注意回收... 目录1.按需创建 PV(使用 StorageClass)创建 StorageClass2.创建 PV

Linux创建服务使用systemctl管理详解

《Linux创建服务使用systemctl管理详解》文章指导在Linux中创建systemd服务,设置文件权限为所有者读写、其他只读,重新加载配置,启动服务并检查状态,确保服务正常运行,关键步骤包括权... 目录创建服务 /usr/lib/systemd/system/设置服务文件权限:所有者读写js,其他

idea+spring boot创建项目的搭建全过程

《idea+springboot创建项目的搭建全过程》SpringBoot是Spring社区发布的一个开源项目,旨在帮助开发者快速并且更简单的构建项目,:本文主要介绍idea+springb... 目录一.idea四种搭建方式1.Javaidea命名规范2JavaWebTomcat的安装一.明确tomcat

springboot依靠security实现digest认证的实践

《springboot依靠security实现digest认证的实践》HTTP摘要认证通过加密参数(如nonce、response)验证身份,避免明文传输,但存在密码存储风险,相比基本认证更安全,却因... 目录概述参数Demopom.XML依赖Digest1Application.JavaMyPasswo

分析 Java Stream 的 peek使用实践与副作用处理方案

《分析JavaStream的peek使用实践与副作用处理方案》StreamAPI的peek操作是中间操作,用于观察元素但不终止流,其副作用风险包括线程安全、顺序混乱及性能问题,合理使用场景有限... 目录一、peek 操作的本质:有状态的中间操作二、副作用的定义与风险场景1. 并行流下的线程安全问题2. 顺

Java 结构化并发Structured Concurrency实践举例

《Java结构化并发StructuredConcurrency实践举例》Java21结构化并发通过作用域和任务句柄统一管理并发生命周期,解决线程泄漏与任务追踪问题,提升代码安全性和可观测性,其核心... 目录一、结构化并发的核心概念与设计目标二、结构化并发的核心组件(一)作用域(Scopes)(二)任务句柄