Труд не бывает даром

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

• использовать библиотеку Axios для получения данных из JSON-файла;
• манипулировать объектом параметров ECharts для обновления визуализации;
• настраивать диаграммы, настраивая заголовок, макет и другие свойства.

Skills Graph

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

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

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

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

где:

• index.html - главная страница.
• js/echarts.min.js - файл ECharts.
• js/axios.min.js - файл axios.
• data.json - данные о урожае зерновых культур в тоннах за соответствующий год.

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

Далее откройте "Web 8080" в верхней части ВМ и вручную обновите страницу, чтобы увидеть следующий эффект в вашем браузере:

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

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

1. В файле index.html найдите раздел // TODO.
2. Используйте метод axios.get() для получения данных из файла data.json.

axios.get("./data.json").then((res) => {
  let data = res.data.data;
  // TODO: Обработать данные и обновить объект параметров
});

3. Внутри обратного вызова .then() обработайте данные из файла data.json и обновите объект option соответственно.

   • Создайте объект dataObj для хранения данных по каждому типу сельскохозяйственной культуры.
   • Создайте массив sourceTip для хранения меток для данных.
   • Пройдитесь по данным и заполните массивы dataObj и sourceTip.
   • Создайте новый массив newSource и заполните его данными из dataObj и sourceTip.
   • Обновите option.dataset.source массивом newSource.
   • Вызовите myChart.setOption(option) для обновления диаграммы новыми данными.

// TODO
let dataObj = {
  wheat: ["wheat"],
  soybean: ["soybean"],
  potato: ["potato"],
  corn: ["corn"]
};
let sourceTip = ["all"];

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

  for (const key1 in data) {
    sourceTip.push(key1);
    for (const key2 in data[key1]) {
      dataObj[key2].push(data[key1][key2]);
    }
  }

  let newSource = [];
  newSource.push(sourceTip);
  for (const key in dataObj) {
    newSource.push(dataObj[key]);
  }

  option.dataset.source = newSource;
  myChart.setOption(option);
});

4. Сохраните файл index.html и обновите страницу. Теперь вы должны увидеть обновленные линейную и круговую диаграммы с правильными данными.

Резюме

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