Создание интерактивных столбчатых диаграмм с использованием ECharts

Введение

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

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

🎯 Задачи

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

• Как исправить ошибку в исходном коде для правильного отображения диаграммы
• Как изменить настройки оси X и оси Y, чтобы обеспечить правильное направление отображения диаграммы
• Как настроить данные в серии, чтобы соответствовать порядку меток оси X

🏆 Достижения

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

• Инициализировать экземпляр ECharts и настроить параметры диаграммы
• Определить свойства оси X и оси Y для управления внешним видом диаграммы
• Обновить данные в серии, чтобы соответствовать желаемой визуализации

Skills Graph

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

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

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

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

где:

• index.html - главная страница.
• js/echarts.js - файл ECharts.

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

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

Исправление ошибки

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

1. Откройте файл index.html в предоставленном проекте.
2. Было обнаружено, что в коде внутри тега <script> не определена ось X. В диаграмме ECharts обе оси X и Y должны быть определены независимо от наличия данных. Поэтому мы внесли следующие изменения в код внутри var option = {...}; в разделе TODO следующим образом:

// TODO
// xAxis
xAxis: {
  data: ["Tom", "Tony", "Lucas", "Lucy", "Anna", "Kevin"]
},
// yAxis
yAxis: {},
series: [
  {
    name: "grades",
    type: "bar",
    data: [55, 90, 65, 70, 80, 63]
  }
]

Это исправит ошибку и позволит отобразить диаграмму.

4. Сохраните изменения и перезагрузите страницу, чтобы увидеть диаграмму.

Резюме

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