Crea un gráfico de líneas con la biblioteca ECharts

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-445648{{"Tiempo con tu teléfono"}} html/head_elems -.-> lab-445648{{"Tiempo con tu teléfono"}} html/doc_flow -.-> lab-445648{{"Tiempo con tu teléfono"}} html/embed_media -.-> lab-445648{{"Tiempo con tu teléfono"}} html/inter_elems -.-> lab-445648{{"Tiempo con tu teléfono"}} end

Configurar el proyecto

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

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

Pantalla de configuración del proyecto sin terminar

Corregir el error en el archivo `index.html`

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

Localiza la sección var option = {} en el archivo index.html.
Hay un error en el elemento de configuración que hace que los ejes se muestren incorrectamente.
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"
    }
  ]
};

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.