Визуализация данных с использованием Echarts и JSON

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

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

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

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

├── css
├── index.html
├── lib
└── mock
    └── data.json

В них:

• index.html - главная страница.
• css - папка, в которой хранятся стили проекта.
• lib - папка, в которой хранятся зависимости проекта.
• mock/data.json - JSON-данные, используемые в запросах проекта.

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

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

Получение данных и отображение содержания белка

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

1. Откройте файл index.html в директории проекта.
2. Найдите комментарий TODO в файле index.html, который находится внутри тега <script>.
3. Внутри функции fetchData добавьте следующий код, чтобы получить данные из MockURL и отобразить содержание белка:

let dataList = ref([]);
async function fetchData() {
  // TODO: код для добавления
  let data = await fetch(MockURL).then((res) => res.json());
  data.unshift({
    name: "header",
    icon: "none"
  });
  echartsInit(data);
  dataList.value = data.slice(1);
}

return {
  echartsInit,
  fetchData
};

4. В хуке onMounted вызовите функцию fetchData, чтобы получить данные и отобразить содержание белка. Наконец, возвращаем это внутри return.

onMounted(() => {
  fetchData();
});
return {
  echartsInit,
  fetchData,
  dataList
};

5. Добавьте следующий код под TODO: код для добавления для отображения полученных данных в HTML, чтобы отобразить данные.

<div class="protein-item" v-for="data in dataList" :key="data.name">
  {{data.name}} {{data.value}}
</div>

6. Сохраните файл index.html и обновите страницу. Теперь вы должны увидеть содержание белка различных продуктов, отображенное в элементе .protein-container.

Готовый результат выглядит так:

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

Резюме

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