Tempo com o Seu Telefone

Introdução

Neste projeto, você aprenderá como criar um gráfico de linhas usando a biblioteca ECharts. O gráfico exibirá o número de horas que o usuário passa no telefone a cada dia da semana.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o projeto e abrir os arquivos necessários
• Como corrigir um erro na configuração do ECharts
• Como entender a configuração do gráfico de linhas
• Como personalizar o gráfico modificando a configuração

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar a biblioteca ECharts para criar um gráfico de linhas
• Configurar o título, os eixos e a série de dados do gráfico
• Personalizar o gráfico modificando a configuração

Configurar o Projeto

Nesta etapa, você configurará o projeto e abrirá os arquivos no editor.

1. Abra o editor à direita. Você deve ver dois arquivos — index.html e echarts.js.
2. Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.
3. Abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Corrigir o Erro no Arquivo index.html

Nesta etapa, você corrigirá o erro no arquivo index.html.

1. Localize a seção var option = {} no arquivo index.html.
2. Há um bug no item de configuração que faz com que os eixos sejam exibidos incorretamente.
3. Atualize o objeto option para o seguinte:

var option = {
  title: {
    text: "Horas gastas usando telefones celulares"
  },
  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. Entenda o código acima:

• A propriedade title define o título do gráfico de linhas.
• A propriedade xAxis configura o eixo x, que é definido como o tipo "category" (categoria) e exibe os dias da semana.
• A propriedade yAxis configura o eixo y, que é definido como o tipo "value" (valor).
• A propriedade series é a série onde data são os dados de tempo para cada dia da semana em que o telefone é usado, e type é o tipo de gráfico como um gráfico de linhas.

5. Salve o arquivo e recarregue a página para ver o gráfico atualizado. O resultado final é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.