Ao trabalhar com ECharts em projetos React, a inicialização do gráfico pode variar ligeiramente dependendo do ambiente. Em um projeto React padrão, a importação é feita da segiunte forma:

import echarts from 'echarts';

let myChart = null;
myChart = echarts.init(document.getElementById('chartContainer'));

Em amibentes mais restritos, como microsserviços do Ice, uma abordagem alternativa pode ser necessária:

import * as echarts from 'echarts';

let myChart: any = null;
const chartDom = document.getElementById('chartContainer') as HTMLDivElement;
myChart = echarts.init(chartDom);

Configurações Comuns para Gráficos de Barras A configuração de um gráfico de barras envolve a definição dos dados, opções de tooltip, layout do grid, e a formatação dos eixos X e Y.

// Dados de exemplo para os eixos
const xAxisCategories = ['09/21', '09/22', '09/23', '09/24', '09/25'];
const barValues = [88, 45, 67, 12, 85];

const chartOptions = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow' // Tipo de ponteiro do eixo: 'line' (linha) ou 'shadow' (sombra)
    },
    // Formato da dica: Exibe o nome do eixo, o nome da série e o valor com '%'
    formatter: '{b} - {a}: {c}%',
  },
  grid: {
    top: '30px',       // Espaçamento superior da área do gráfico
    bottom: '20px',    // Espaçamento inferior
    left: '20px',      // Espaçamento esquerdo
    right: '20px',     // Espaçamento direito
    containLabel: true // Garante que os rótulos dos eixos estejam dentro da área do grid
  },
  xAxis: {
    type: 'category',  // Tipo de eixo categórico para rótulos de texto
    data: xAxisCategories, // Dados para o eixo X
    axisLine: { show: false },   // Oculta a linha do eixo X
    axisTick: { show: false },   // Oculta os marcadores de tick do eixo X
    splitLine: { show: false },  // Oculta as linhas de grade verticais
    axisLabel: { color: '#666666' } // Cor dos rótulos do eixo X
  },
  yAxis: {
    type: 'value',     // Tipo de eixo de valor numérico
    min: 0,            // Valor mínimo do eixo Y
    max: 100,          // Valor máximo do eixo Y
    axisLabel: {
      formatter: '{value}%', // Formata os rótulos do eixo Y para exibir como porcentagem
      color: '#666666'
    },
    axisLine: { show: true, lineStyle: { color: '#eeeeee' } }, // Exibe e estiliza a linha do eixo Y
    splitLine: { show: true, lineStyle: { color: '#eeeeee' } }, // Exibe e estiliza as linhas de grade horizontais
    axisTick: { show: false } // Oculta os marcadores de tick do eixo Y
  },
  series: [
    {
      name: 'Taxa de Ocupação', // Nome da série
      type: 'bar',              // Tipo de série: gráfico de barras
      barWidth: '32%',          // Largura das barras
      label: {
        show: false,            // Oculta os rótulos de dados nas barras
        position: 'top',        // Posição do rótulo (se show for true)
        fontSize: 10,
        formatter: function(params) { // Função para formatar o rótulo
          return params.value;
        }
      },
      // Aplica um gradiente de cor às barras
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 1, color: '#00C15E' }, // Cor inferior
        { offset: 0.5, color: '#187BDB' }, // Cor intermediária
        { offset: 0, color: '#3C9CF9' }  // Cor superior
      ]),
      data: barValues // Dados para a série
    }
  ]
};

// Aplica as opções ao gráfico
if (myChart) {
  myChart.setOption(chartOptions);
}

Custmoização de Cores em Barras Individuais Para colorir barras específicas de forma diferente, os dados da série devem ser um array de objetos, onde cada objeto pode conter um value e um itemStyle para personalização:

// Exemplo de dados com estilos individuais
const customData = [
  { value: 85, itemStyle: { color: '#0078FF' } }, // Barra 1 com cor azul
  { value: 80, itemStyle: { color: '#0078FF' } }, // Barra 2 com cor azul
  { value: 77, itemStyle: { color: '#0078FF' } }, // Barra 3 com cor azul
  66, // Barras subsequentes usam a cor padrão da série
  55,
  44,
];

// O restante da configuração da série seria similar, mas utilizando customData
// ...
// series: [{ name: 'Exemplo', type: 'bar', data: customData, ... }]
// ...

Adicionando Gráficos Pictóricos (Pictorial Bar) Gráficos pictóricos podem ser usados para criar efeitos visuais interessantes, como barras que se assemelham a ícones.

const pictorialChartOptions = {
  // ... outras configurações como grid, xAxis, yAxis ...
  series: {
    type: 'pictorialBar', // Tipo de série: gráfico pictórico
    barCategoryGap: '-10%', // Ajusta o espaçamento entre barras para sobreposição
    // Define o símbolo a ser usado para preencher a barra (neste caso, uma forma customizada)
    symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
    color: '#0078FF',     // Cor padrão do símbolo
    label: {
      show: true,         // Exibe os rótulos de dados
      position: 'top',    // Posição dos rótulos
    },
    data: [/* Seus dados aqui */], // Dados para o gráfico pictórico
  },
};

A configuração detalhada de cada item do ECharts oferece grande flexibilidade para a criação de visualizações de dados personalizadas.