Практика DataV: создание большого экрана в Диснейленде

визуализация данных
Практика DataV: создание большого экрана в Диснейленде

Я фанат Диснейленда, и я хочу иметь большой экран, который может отображать ситуацию в Диснейленде в режиме реального времени, чтобы я мог думать о том, идти ли сегодня в парк и в какие развлечения играть в парке. . .

Источники данных

Я написал программу захвата пакетов, чтобы получать данные о работе парка (часы работы проекта, индикаторы состояния) один раз в день, а данные о парке в реальном времени (время в очереди, пассажиропоток и т. д.) — каждые 5 минут.

Сейчас до сих пор пользуюсь хранилищем Mysql, планирую перейти на Redius, работает уже почти год, а производительность все хуже и хуже из-за большого объема данных~

О дате

DataV — это приложение для визуализации данных, созданное Alibaba Cloud. Оно может быстро создать профессионала с помощью графического интерфейса визуализации, чтобы больше людей могли увидеть очарование визуализации данных.

Обычно используется в торговых залах, выставочных центрах, центрах управления, офисах боссов и т. д. для отображения некоторых ключевых данных на огромном светодиодном экране.По сути, это огромный дашборд., это один из лучших способов притвориться!

начать делать

Войтиdatav.aliyun.comОфициальный сайт. 我购买的是基础版，51一年，不是很贵，功能对当前需求够用。

поэтажный план

Вы можете использовать инструмент эскиза, чтобы сначала спланировать:

  1. Верхний дизайн: поскольку это большой экран в режиме реального времени, время имеет важное значение, а вверху находится макет времени-заголовка-логотипа.
  2. Дизайн слева: тенденция пассажиропотока парка, популярность тематических парков в парке, показывая популярность парка и каждого тематического парка.
  3. Промежуточный дизайн: верхняя часть - время ожидания всех элементов в карусели + график выполнения элементов, а нижняя часть показывает время ожидания основных элементов с гистограммой
  4. Дизайн справа: среднее время ожидания парка + время ожидания популярных предметов + индекс парка, показывающий общую ситуацию в парке и популярные предметы

Выберите шаблон

Датава предоставляет несколько наборов шаблонов для разных сценариев, здесь он очень подходит для этого первого набора проектов

выберитеСоздайте большой экранВойдите в интерфейс редактирования

лучшее изготовление

Выберите вспомогательную графику — добавьте таймер, добавьте рамку к заголовку, добавьте логотип и закончите через 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
  },...
]

Введите настройки стиля, выберите настраиваемый столбец, чтобы настроить отображаемые данные, просто добавьте сюда два элемента: имя и время в очереди.

Конфигурация расписания шоу такая же, как и время ожидания проекта.

Затем создайте время ожидания в следующей вертикальной гистограмме, чтобы вы могли более интуитивно отображать количество проектов, конфигурация, как указано выше.

Право на изготовление

Производство на правой стороне такое же, как и на левой, поэтому я не буду объяснять их по отдельности.

полный эффект

Прилагается мой небольшой этюд, и теперь я могу видеть реальную ситуацию в раю, когда смотрю вверх, не правда ли, очень удобно!

Прикрепите мой WeChat, добро пожаловать на общение с Disney, а также фронт и бэкенд вместе!

Категории