Utilização de Datasets

O componente dataset no Apache ECharts é responsável por centralizar a gestão de dados, permitindo que as informações sejam separadas da configuração visual das séries. Esta abodragem facilita o reuso de dados entre diferentes gráficos e torna o código mais limpo.

No exemplo abaixo, definimos uma estrutura básica utilizando uma matriz bidimensional como fonte de dados:

const configuracao = {
  legend: {},
  tooltip: {},
  dataset: {
    // A propriedade source define a matriz de dados. 
    // A primeira linha costuma ser interpretada como o cabeçalho.
    source: [
      ['Dispositivo', 'Vendas_Jan', 'Vendas_Fev', 'Vendas_Mar'],
      ['Smartphones', 150.5, 180.2, 165.8],
      ['Notebooks', 95.2, 110.4, 105.1],
      ['Tablets', 60.8, 55.2, 70.5],
      ['Monitores', 45.1, 52.3, 48.9]
    ]
  },
  // O eixo X é definido como 'category', mapeando automaticamente para a primeira coluna do dataset.
  xAxis: { type: 'category' },
  yAxis: {},
  // Cada objeto no array series representa uma sequência de dados no gráfico.
  // Por padrão, cada série corresponde a uma coluna subsequente do source.
  series: [
    { type: 'bar' }, 
    { type: 'bar' }, 
    { type: 'bar' }
  ]
};

A estrutura do source funciona de forma análoga a uma planilha: a primeira linha atua como os metadados (nomes das dimensões) e as linhas seguintes contêm os valores numéricos ou categóricos que serão renderizados.

Mapeamento de Séries e Disposição de Dados

Uma "série" (series) define como os dados serão visualizados (ex: barras, linhas, dispersão). A quantidade de objetos definidos no array series determina quantos conjuntos de informações serão exibidos simultaneamente.

É possível alterar a forma como o ECharts lê o dataset utilizando a propriedade seriesLayoutBy. Por padrão, o valor é 'column', mas pode ser alterado para 'row' caso os dados estejam organizados horizontalmente.

series: [
    // Séries mapeadas a partir das linhas do dataset
    { type: 'line', seriesLayoutBy: 'row' },
    { type: 'line', seriesLayoutBy: 'row' },
    
    // Séries vinculadas a um segundo sistema de coordenadas (Grid), usando colunas
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
]

Quando nenhuma configuração de mapeamento explícita é fornecida, o ECharts adota o comportamento padrão: o eixo de categorias (geralmente o eixo X) consome a primeira coluna, e cada série subsequente consome as colunas restantes do conjunto de dados.

Conceito de Dimensões

Dentro do ecossistema ECharts, uma dimensão representa um atributo específico de um item de dado. Em um conjunto de dados tabulares, cada coluna é geralmente tratada como uma dimensão.

As dimensões permitem classificar as propriedades dos dados. Por exemplo, em um cenário de análise de vendas de hardware, as dimensões seriam "Nome do Produto", "Mês de Referência" e "Volume de Vendas". Essa abstração facilita a filtragem e a transformação de dados complexos antes da renderização visual.