Создание визуализации данных с использованием ECharts

Введение

В этом проекте вы научитесь создавать диаграмму визуализации данных с использованием библиотеки ECharts. Цель проекта - помочь пользователю онлайн-обучения Lucy лучше визуализировать свою ежедневную учебную нагрузку.

👀 Предварительный просмотр

Предварительный просмотр столбчатой диаграммы ECharts

🎯 Задачи

В этом проекте вы научитесь:

Получать данные из JSON-файла и обрабатывать их, чтобы извлечь необходимую информацию.
Использовать библиотеку ECharts для создания столбчатой диаграммы, которая отображает статистику учебной нагрузки за неделю и месяц.
Реализовывать интерактивность, которая позволяет пользователю переключаться между недельным и месячным видами. -Динамически изменять размер диаграммы при изменении размера окна.

🏆 Достижения

После завершения этого проекта вы сможете:

Получать данные из JSON-файла и обрабатывать их для визуализации.
Конфигурировать и настраивать столбчатую диаграмму ECharts для отображения статистики учебной нагрузки.
Добавлять интерактивность в диаграмму и обрабатывать взаимодействия пользователя.
Предоставлять диаграмме отзывчивость и адаптивность при изменении размера окна.

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

├── css
│   └── style.css
├── data.json
├── index.html
└── js
    ├── axios.min.js
    └── echarts.min.js

В такой структуре:

index.html - главная страница.
js/echarts.min.js - файл ECharts.
js/axios.min.js - файл axios.
css/style.css - файл стилей.
data.json - файл с данными о продолжительности обучения.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, чтобы увидеть страницу.

Получение данных

В этом шаге вы научитесь получать данные из файла data.json и сохранять их в необходимые структуры данных.

Откройте файл index.html в вашем редакторе кода.
Найдите раздел // TODO в коде JavaScript.
Создайте два объекта для хранения недельных и месячных данных:

// TODO
let weekData = {
  x: [],
  y: []
};

let monthData = {
  x: [],
  y: []
};

Реализуйте функцию mySetOption(), чтобы обновить параметры диаграммы на основе переданных ей данных.

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  myChart.setOption(option);
}

Используйте метод axios.get() для получения данных из файла data.json. Ответ от API-вызова будет содержать данные в свойстве res.data.data.

axios.get("./data.json").then((res) => {
  const data = res.data.data;

  // Обработайте данные здесь
});

Внутри обратного вызова метода then() переберите объект data и обработайте данные о продолжительности обучения для каждого дня. Вычислите общую продолжительность обучения для каждой недели и месяца и сохраните результаты в объекты weekData и monthData соответственно.

for (const key in data) {
  let weekCount = (monthCount = 0),
    weekNum = 1;

  for (let i = 0; i < data[key].length; i++) {
    weekCount += data[key][i];
    monthCount += data[key][i];

    if (
      (i + 1) % 7 === 0 ||
      (data[key].length - i <= 7 && i === data[key].length - 1)
    ) {
      weekData.x.push(`Week ${weekNum++} (${key})`);
      weekData.y.push(weekCount);
      weekCount = 0;
    }
  }
  monthData.x.push(key);
  monthData.y.push(monthCount);
}

После обработки данных вызовите функцию mySetOption() и передайте объект weekData, чтобы по умолчанию отобразить недельную статистику.

mySetOption(weekData);

Эффект кода после этого шага обработки выглядит так:

// TODO
let weekData = {
    x: [],
    y: []
  },
  monthData = {
    x: [],
    y: []
  };

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // сброс
  myChart.setOption(option);
}

axios.get("./data.json").then((res) => {
  const data = res.data.data;

  for (const key in data) {
    let weekCount = (monthCount = 0),
      weekNum = 1;

    for (let i = 0; i < data[key].length; i++) {
      weekCount += data[key][i];
      monthCount += data[key][i];

      if (
        (i + 1) % 7 === 0 ||
        (data[key].length - i <= 7 && i === data[key].length - 1)
      ) {
        weekData.x.push(`Week ${weekNum++} (${key})`);
        weekData.y.push(weekCount);
        weekCount = 0;
      }
    }
    monthData.x.push(key);
    monthData.y.push(monthCount);
  }
  mySetOption(weekData);
});

Отображение диаграммы

В этом шаге вы научитесь переключать отображение диаграмм с использованием библиотеки ECharts.

Откройте файл index.html в вашем редакторе кода.
Найдите раздел mySetOption в коде JavaScript.
Добавьте слушатели событий для вкладок (недельные и месячные) после функции mySetOption, чтобы обновить диаграмму при нажатии на них пользователем.

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // сброс
  myChart.setOption(option);
}

document.querySelector(".tabs").addEventListener("click", function (e) {
  if (e.target.id === "week") {
    mySetOption(weekData);
  } else if (e.target.id === "month") {
    mySetOption(monthData);
  }
});

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

Описание изображения

Резюме

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

Бесконечное море знаний