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 Boot集成/输出/日志级别控制/持久化开发实践

《SpringBoot集成/输出/日志级别控制/持久化开发实践》SpringBoot默认集成Logback,支持灵活日志级别配置(INFO/DEBUG等),输出包含时间戳、级别、类名等信息,并可通过... 目录一、日志概述1.1、Spring Boot日志简介1.2、日志框架与默认配置1.3、日志的核心作用

破茧 JDBC:MyBatis 在 Spring Boot 中的轻量实践指南

《破茧JDBC:MyBatis在SpringBoot中的轻量实践指南》MyBatis是持久层框架,简化JDBC开发,通过接口+XML/注解实现数据访问,动态代理生成实现类,支持增删改查及参数... 目录一、什么是 MyBATis二、 MyBatis 入门2.1、创建项目2.2、配置数据库连接字符串2.3、入

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.

在Java中使用OpenCV实践

《在Java中使用OpenCV实践》用户分享了在Java项目中集成OpenCV4.10.0的实践经验,涵盖库简介、Windows安装、依赖配置及灰度图测试,强调其在图像处理领域的多功能性,并计划后续探... 目录前言一 、OpenCV1.简介2.下载与安装3.目录说明二、在Java项目中使用三 、测试1.测

MyBatis-Plus 自动赋值实体字段最佳实践指南

《MyBatis-Plus自动赋值实体字段最佳实践指南》MyBatis-Plus通过@TableField注解与填充策略,实现时间戳、用户信息、逻辑删除等字段的自动填充,减少手动赋值,提升开发效率与... 目录1. MyBATis-Plus 自动赋值概述1.1 适用场景1.2 自动填充的原理1.3 填充策略

Olingo分析和实践之EDM 辅助序列化器详解(最佳实践)

《Olingo分析和实践之EDM辅助序列化器详解(最佳实践)》EDM辅助序列化器是ApacheOlingoOData框架中无需完整EDM模型的智能序列化工具,通过运行时类型推断实现灵活数据转换,适用... 目录概念与定义什么是 EDM 辅助序列化器?核心概念设计目标核心特点1. EDM 信息可选2. 智能类

Olingo分析和实践之OData框架核心组件初始化(关键步骤)

《Olingo分析和实践之OData框架核心组件初始化(关键步骤)》ODataSpringBootService通过初始化OData实例和服务元数据,构建框架核心能力与数据模型结构,实现序列化、URI... 目录概述第一步:OData实例创建1.1 OData.newInstance() 详细分析1.1.1

Olingo分析和实践之ODataImpl详细分析(重要方法详解)

《Olingo分析和实践之ODataImpl详细分析(重要方法详解)》ODataImpl.java是ApacheOlingoOData框架的核心工厂类,负责创建序列化器、反序列化器和处理器等组件,... 目录概述主要职责类结构与继承关系核心功能分析1. 序列化器管理2. 反序列化器管理3. 处理器管理重要方

虚拟机Centos7安装MySQL数据库实践

《虚拟机Centos7安装MySQL数据库实践》用户分享在虚拟机安装MySQL的全过程及常见问题解决方案,包括处理GPG密钥、修改密码策略、配置远程访问权限及防火墙设置,最终通过关闭防火墙和停止Net... 目录安装mysql数据库下载wget命令下载MySQL安装包安装MySQL安装MySQL服务安装完成

SpringBoot整合(ES)ElasticSearch7.8实践

《SpringBoot整合(ES)ElasticSearch7.8实践》本文详细介绍了SpringBoot整合ElasticSearch7.8的教程,涵盖依赖添加、客户端初始化、索引创建与获取、批量插... 目录SpringBoot整合ElasticSearch7.8添加依赖初始化创建SpringBoot项