Динамический дашборд продаж с использованием Echarts

Введение

В этом проекте вы научитесь создавать реального времени дашборд продаж с использованием библиотеки Echarts. Дашборд будет отображать данные о продажах и объеме в визуально привлекательном и легко понимаемом формате.

👀 Предпросмотр

🎯 Задачи

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

• Как настроить проект и получить необходимые файлы
• Как завершить настройку "yAxis" в файле index.js
• Как правильно присвоить значения из данных с сервера соответствующим параметрам графика в функции renderChart

🏆 Достижения

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

• Отображать данные в графиках с использованием библиотеки Echarts
• Структурировать и организовать свой код для проекта визуализации данных
• Работать с асинхронным получением данных и обновлять график в реальном времени

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

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

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

├── echarts.js
├── index.css
├── index.html
└── index.js

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

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

Завершение настройки оси Y

В этом шаге вы научитесь как завершить настройку "оси y" в файле index.js.

1. Откройте файл index.js.
2. Найдите конфигурацию "оси y" в объекте option.
3. Обновите конфигурацию "оси y", чтобы она соответствовала следующим требованиям:
   • Первый элемент должен иметь name равным "продажи" и position слева от графика.
   • Второй элемент должен иметь name равным "объем" и position справа от графика.

Ваша обновленная конфигурация "оси y" должна выглядеть так:

yAxis: [
  {
    type: "value",
    name: "продажи",
    position: "left"
  },
  {
    type: "value",
    name: "объем",
    position: "right"
  }
],

Завершение функции renderChart

В этом шаге вы научитесь как завершить функцию renderChart в файле index.js.

1. Откройте файл index.js.
2. Найдите функцию renderChart.
3. Завершите код в функции renderChart, чтобы правильно присвоить значения из saleObj и countObj времени для оси X, а продажи и объем для оси Y.

Ваша обновленная функция renderChart должна выглядеть так:

async function renderChart() {
  const result = await Ajax();
  document.querySelector("#result").innerText = JSON.stringify(result);
  const myChart = echarts.init(document.getElementById("main"));

  // Assign the values from `saleObj` and `countObj` to the appropriate options
  option.xAxis.data = Object.keys(result.data.saleObj);
  option.series[0].data = Object.values(result.data.saleObj);
  option.series[1].data = Object.values(result.data.countObj);

  myChart.setOption(option, true);
  document.querySelector("#data").innerText = JSON.stringify(charData);
}

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

Резюме

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