Tiempo con tu teléfono

Introducción

En este proyecto, aprenderás a crear un gráfico de líneas utilizando la biblioteca ECharts. El gráfico mostrará la cantidad de horas que el usuario pasa en su teléfono cada día de la semana.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el proyecto y abrir los archivos necesarios
• Cómo corregir un error en la configuración de ECharts
• Cómo entender la configuración del gráfico de líneas
• Cómo personalizar el gráfico modificando la configuración

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar la biblioteca ECharts para crear un gráfico de líneas
• Configurar el título, los ejes y la serie de datos del gráfico
• Personalizar el gráfico modificando la configuración

Configurar el proyecto

En este paso, configurarás el proyecto y abrirás los archivos en el editor.

1. Abre el editor en la derecha. Deberías ver dos archivos: index.html y echarts.js.
2. Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.
3. Abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Corregir el error en el archivo index.html

En este paso, corregirás el error en el archivo index.html.

1. Localiza la sección var option = {} en el archivo index.html.
2. Hay un error en el elemento de configuración que hace que los ejes se muestren incorrectamente.
3. Actualiza el objeto option al siguiente:

var option = {
  title: {
    text: "Horas empleadas en el uso del teléfono móvil"
  },
  xAxis: {
    type: "category",
    data: [
      "Lunes",
      "Martes",
      "Miércoles",
      "Jueves",
      "Viernes",
      "Sábado",
      "Domingo"
    ]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
      type: "line"
    }
  ]
};

4. Entiende el código anterior:

• La propiedad title establece el título del gráfico de líneas.
• La propiedad xAxis configura el eje x, que se establece como tipo "category" y muestra los días de la semana.
• La propiedad yAxis configura el eje y, que se establece como tipo "value".
• La propiedad series es la serie donde data es los datos de tiempo de cada día de la semana que se utiliza el teléfono, y type es el tipo de gráfico como un gráfico de líneas.

5. Guarda el archivo y recarga la página para ver el gráfico actualizado. El resultado final es el siguiente:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.