Время, проведённое с телефоном

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

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

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

1. Откройте редактор с правой стороны. Вы должны увидеть два файла — index.html и echarts.js.
2. Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.
3. Откройте "Web 8080" в верхней части ВМ и обновите его вручную, чтобы увидеть страницу.

Исправьте ошибку в файле index.html

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

1. Найдите раздел var option = {} в файле index.html.
2. В настройке есть ошибка, которая приводит к неправильному отображению осей.
3. Обновите объект option следующим образом:

var option = {
  title: {
    text: "Hours spent using mobile phones"
  },
  xAxis: {
    type: "category",
    data: [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
      "Sunday"
    ]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
      type: "line"
    }
  ]
};

4. Разберьтесь в коде выше:

• Свойство title задает заголовок линейного графика.
• Свойство xAxis настраивает ось x, которая имеет тип "category" и отображает дни недели.
• Свойство yAxis настраивает ось y, которая имеет тип "value".
• Свойство series — это серия, где data — это временные данные для каждого дня недели, когда используется телефон, а type — это тип графика в виде линейного графика.

5. Сохраните файл и обновите страницу, чтобы увидеть обновленный график. Готовый результат выглядит так:

Резюме

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