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

一起神奇
6,675 阅读4分钟

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

数据来源

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

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

关于DataV

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

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

开始制作

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

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

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

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

右侧制作

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

完成效果

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

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

avatar
文章
阅读
粉丝