Problema Técnico

Ao desenvolver gráficos interativos com a biblioteca ECharts, surge a necessidade de exibir tooltips dos dados de forma automática e cíclica, simulando uma rotação pelos pontos de dados. Esta funcionalidade deve pausar quando o usuário interage com o gráfico (passando o mouse sobre um ponto específico) e retomar automaticamente após a interação.

Implementação da Solução

A solução consiste em encapsular a lógica de controle de intervalo e eventos do mouse em uma função JavaScript reutilizável. A função gerencia um temporizador para alternar entre os pontos de dados e utiliza os eventos mouseover e mouseout da instância do gráfico para controlar a pausa.

/**
 * Inicia a rotação automática dos tooltips para um gráfico ECharts.
 * @param {Object} instanciaGrafico - A instância do objeto ECharts.
 * @param {number} totalDados - Quantidade total de pontos de dados na série.
 * @param {number} intervaloMs - Tempo em milissegundos entre cada troca de tooltip.
 * @returns {number} Identificador do intervalo, útil para limpeza em frameworks.
 */
export function iniciarRotacaoTooltip(instanciaGrafico, totalDados, intervaloMs) {
  // Configurações padrão para parâmetros opcionais
  const padroes = {
    intervalo: 3000,
    dados: 100
  };
  intervaloMs = intervaloMs || padroes.intervalo;
  totalDados = totalDados || padroes.dados;

  let ponteiroDados = 0;
  let timerId = null;

  // Função interna para atualizar o estado de destaque e tooltip
  const aplicarDestaque = (posicao) => {
    instanciaGrafico.dispatchAction({
      type: 'downplay',
      seriesIndex: 0
    });
    instanciaGrafico.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: posicao
    });
    instanciaGrafico.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: posicao
    });
  };

  // Limpar intervalo anterior se existir
  if (timerId) {
    clearInterval(timerId);
  }

  // Estabelecer o ciclo de exibição
  timerId = setInterval(() => {
    aplicarDestaque(ponteiroDados);
    ponteiroDados = (ponteiroDados + 1) % totalDados;
  }, intervaloMs);

  // Adicionar interrupção ao interagir com o mouse
  instanciaGrafico.on('mouseover', (evento) => {
    clearInterval(timerId);
    aplicarDestaque(evento.dataIndex);
  });

  // Restaurar ciclo após a interação
  instanciaGrafico.on('mouseout', () => {
    timerId = setInterval(() => {
      aplicarDestaque(ponteiroDados);
      ponteiroDados = (ponteiroDados + 1) % totalDados;
    }, intervaloMs);
  });

  // Retornar ID para gerenciamento de recursos
  return timerId;
}

export default { iniciarRotacaoTooltip };

Aplicação Prática

Para integrar esta funcionalidade em um projeto, importe a função e passe os argumentos correspondentes à instância do gráfico e à configuração dos dados.

import { iniciarRotacaoTooltip } from './moduloFerramentas';

// 'graficoECharts' é a instância ECharts, 'opcoes' contém as configurações do gráfico
const intervaloAtivo = iniciarRotacaoTooltip(
  graficoECharts,
  opcoes.series[0].data.length,
  3000
);

Em aplicações baseadas em frameworks como Vue ou React, é recomendado armazenar o identificador retornado (intervaloAtivo) para limpar o intervalo durante a desmontagem do componente, evitando vazamentos de memória ou comportamentos inesperados.