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

Eastboat 发布于2019-08-21 18:24 / 1634人阅读

摘要：我是一个迪士尼乐园的爱好者，我想拥有一块大屏能实时显示迪士尼乐园的情况，以便我觉得今天去不去乐园，去乐园玩什么项目。。。完成效果附上我的小书房，这下抬头就可以看到乐园的实况，是不是很方便呢附上我的微信，欢迎喜欢迪士尼和前后端的一起交流

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

数据来源

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

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

关于DataV

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

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

开始制作

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

布局规划

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

顶部设计：因为是实时大屏，时间必不可少，顶部为时间 - 标题 - Logo 的布局

左侧设计：乐园客流量趋势，乐园主题园区热度，显示乐园和各个主题园区的热门情况

中间设计：上部分为轮播所有项目的等待时间+演出项目的时间表，下部分用柱状图显示核心项目的排队时间

右侧设计：乐园平均等待时间 + 热门项目等待时间 + 乐园指数，显示乐园整体和热门项目的情况

选择模板

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
  },...
]

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

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

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

右侧制作

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

完成效果

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

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

GPU云服务器云服务器 java编程动物乐园实况实况足球迪士尼

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90420.html

阿里云前端周刊 - 第 32 期

摘要：有赞全链路压测方案设计与实施详解有赞在双十一之前完成了全链路压测方案，并把它用于大促的扩容和容量验证，取得错的成果。实现外部系统与苏宁的完美对接，使业务的处理更加高效便捷。推荐 1. Preact：一个备胎的自我修养 https://zhuanlan.zhihu.com/p/... 前一段时间由于React Licence的问题，团队内部积极的探索React的替代方案，同时考虑到之后...

LuDongWei 2019-08-21 17:49 评论0 收藏0
知晓云 2 周年：如何成为 8 万多个小程序，5 万多名开发者的云服务首选

摘要：同时得益于行业的认可，我们也有机会与希尔顿默林娱乐迪士尼等国际集团合作，产出了多个以小程序为核心，适用于行业场景的标杆解决方案，帮助企业客户实现了业务的新一轮增长。截至今日点，我们已经累计服务了万多个小程序，万多名开发者和上百家企业。 showImg(https://segmentfault.com/img/remote/1460000020010535?w=1000&h=662);2...

cheng10 2019-08-26 10:39 评论0 收藏0
阿里云发布SaaS加速器意欲何为?

摘要：未来已来，阿里云峰会向外界阐述了未来十年的战略方向第一技术，达摩院加持的云。不过阿里云提出的加速器计划，还是让企业服务市场为之慌乱。笔者认为阿里云的加速器计划，不是阿里做不做，关键的核心他有可能会影响到整个软件行业的未来格局。All in Cloud未来已来，阿里云峰会向外界阐述了未来十年的战略方向：第一、技术，达摩院加持的云。第二、产品，数据智能的云。第三、商业，最佳实践的云。第四、生态，...

tuniutech 2019-04-30 14:45 评论0 收藏0