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

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

数据来源

我写了一个抓包的程序，天天获取一次乐园运营数据（项目开放时间，状态灯），每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
  },...
]
复制代码

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

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

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

右侧制做

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

完成效果

附上个人小书房，这下抬头就能够看到乐园的实况，是否是很方便呢！

附上个人微信，欢迎喜欢迪士尼和先后端的一块儿交流！