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实践:创建迪士尼乐园实况大屏的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/weixin_34348111/article/details/88924419
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/204106

相关文章

apache的commons-pool2原理与使用实践记录

《apache的commons-pool2原理与使用实践记录》ApacheCommonsPool2是一个高效的对象池化框架,通过复用昂贵资源(如数据库连接、线程、网络连接)优化系统性能,这篇文章主... 目录一、核心原理与组件二、使用步骤详解(以数据库连接池为例)三、高级配置与优化四、典型应用场景五、注意事

Linux lvm实例之如何创建一个专用于MySQL数据存储的LVM卷组

《Linuxlvm实例之如何创建一个专用于MySQL数据存储的LVM卷组》:本文主要介绍使用Linux创建一个专用于MySQL数据存储的LVM卷组的实例,具有很好的参考价值,希望对大家有所帮助,... 目录在Centos 7上创建卷China编程组并配置mysql数据目录1. 检查现有磁盘2. 创建物理卷3. 创

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1

Jvm sandbox mock机制的实践过程

《Jvmsandboxmock机制的实践过程》:本文主要介绍Jvmsandboxmock机制的实践过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、背景二、定义一个损坏的钟1、 Springboot工程中创建一个Clock类2、 添加一个Controller

Mysql中的用户管理实践

《Mysql中的用户管理实践》:本文主要介绍Mysql中的用户管理实践,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录13. 用户管理13.1 用户 13.1.1 用户信息 13.1.2 创建用户 13.1.3 删除用户 13.1.4 修改用户

在Java中基于Geotools对PostGIS数据库的空间查询实践教程

《在Java中基于Geotools对PostGIS数据库的空间查询实践教程》本文将深入探讨这一实践,从连接配置到复杂空间查询操作,包括点查询、区域范围查询以及空间关系判断等,全方位展示如何在Java环... 目录前言一、相关技术背景介绍1、评价对象AOI2、数据处理流程二、对AOI空间范围查询实践1、空间查

qtcreater配置opencv遇到的坑及实践记录

《qtcreater配置opencv遇到的坑及实践记录》我配置opencv不管是按照网上的教程还是deepseek发现都有些问题,下面是我的配置方法以及实践成功的心得,感兴趣的朋友跟随小编一起看看吧... 目录电脑环境下载环境变量配置qmake加入外部库测试配置我配置opencv不管是按照网上的教程还是de

golang实现动态路由的项目实践

《golang实现动态路由的项目实践》本文主要介绍了golang实现动态路由项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习... 目录一、动态路由1.结构体(数据库的定义)2.预加载preload3.添加关联的方法一、动态路由1

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

《Vue2项目中配置TailwindCSS和FontAwesome的最佳实践举例》:本文主要介绍Vue2项目中配置TailwindCSS和FontAwesome的最... 目录vue 2 项目中配置 Tailwind css 和 Font Awesome 的最佳实践一、Tailwind CSS 配置1. 安

MyBatis分页插件PageHelper深度解析与实践指南

《MyBatis分页插件PageHelper深度解析与实践指南》在数据库操作中,分页查询是最常见的需求之一,传统的分页方式通常有两种内存分页和SQL分页,MyBatis作为优秀的ORM框架,本身并未提... 目录1. 为什么需要分页插件?2. PageHelper简介3. PageHelper集成与配置3.