Painel de Vendas em Tempo Real com Echarts

Introdução

Neste projeto, você aprenderá como criar um painel de vendas em tempo real usando a biblioteca Echarts. O painel exibirá os dados de vendas e volume em um formato visualmente atraente e fácil de entender.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o projeto e obter os arquivos necessários
• Como completar a configuração "yAxis" no arquivo index.js
• Como atribuir corretamente os valores dos dados do backend às opções de gráfico apropriadas na função renderChart

🏆 Conquistas

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

• Renderizar dados em gráficos usando a biblioteca Echarts
• Estruturar e organizar seu código para um projeto de visualização de dados
• Trabalhar com a recuperação de dados assíncrona e atualizar o gráfico em tempo real

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga as etapas abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura do diretório é a seguinte:

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

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Completando a Configuração do yAxis

Nesta etapa, você aprenderá como completar a configuração "yAxis" no arquivo index.js.

1. Abra o arquivo index.js.
2. Encontre a configuração yAxis no objeto option.
3. Atualize a configuração yAxis para atender aos seguintes requisitos:
   • O primeiro item deve ter name como "sales" e position no lado esquerdo do gráfico.
   • O segundo item deve ter name como "volume" e position no lado direito do gráfico.

Sua configuração yAxis atualizada deve ser semelhante a esta:

yAxis: [
  {
    type: "value",
    name: "sales",
    position: "left"
  },
  {
    type: "value",
    name: "volum",
    position: "right"
  }
],

Completando a Função renderChart

Nesta etapa, você aprenderá como completar a função renderChart no arquivo index.js.

1. Abra o arquivo index.js.
2. Encontre a função renderChart.
3. Complete o código na função renderChart para atribuir corretamente os valores de saleObj e countObj ao tempo para o eixo X, e vendas e volume para o eixo Y.

Sua função renderChart atualizada deve ser semelhante a esta:

async function renderChart() {
  const result = await Ajax();
  document.querySelector("#result").innerText = JSON.stringify(result);
  const myChart = echarts.init(document.getElementById("main"));

  // Assign the values from `saleObj` and `countObj` to the appropriate options
  option.xAxis.data = Object.keys(result.data.saleObj);
  option.series[0].data = Object.values(result.data.saleObj);
  option.series[1].data = Object.values(result.data.countObj);

  myChart.setOption(option, true);
  document.querySelector("#data").innerText = JSON.stringify(charData);
}

Após concluir estas etapas, seu projeto de painel de vendas deve estar totalmente funcional e exibir os dados de vendas e volume em tempo real corretamente. O efeito da página final é o seguinte:

Resumo

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