#Eventos de interação personalizados

Escreva JavaScript no editor de eventos e registre interações através da instância chart do ECharts para criar comportamentos interativos. Por exemplo, você pode navegar para uma nova página ou abrir um modal de detalhamento (drill-down).

#Registrar e Desregistrar Eventos

• Registrar: chart.on(eventName, handler)
• Desregistrar: chart.off(eventName, handler) ou chart.off(eventName) para limpar eventos com o mesmo nome.

Atenção: Por segurança, é altamente recomendado desregistrar um evento antes de registrá-lo novamente!

#Estrutura dos parâmetros do handler

Os campos comuns incluem params.data e params.name.

#Exemplo: Clique para destacar uma seleção

chart.off('click');
chart.on('click', (params) => {
  const { seriesIndex, dataIndex } = params;
  // Destaca o ponto de dados atual
  chart.dispatchAction({ type: 'highlight', seriesIndex, dataIndex });
  // Desfaz o destaque dos outros
  chart.dispatchAction({ type: 'downplay', seriesIndex });
});

#Exemplo: Clique para navegar para uma página

chart.off('click');
chart.on('click', (params) => {
  const order_date = params.data[0]
  
  // Opção 1: Navegação interna sem recarregar a página (recomendado), requer apenas o caminho relativo
  ctx.router.navigate(`/new-path/orders?order_date=${order_date}`)

  // Opção 2: Navegar para uma página externa, requer URL completa
  window.location.href = `https://www.host.com/new-path/orders?order_date=${order_date}`

  // Opção 3: Abrir página externa em uma nova aba, requer URL completa
  window.open(`https://www.host.com/new-path/orders?order_date=${order_date}`)
});

#Exemplo: Clique para abrir um modal de detalhes (drill-down)

chart.off('click');
chart.on('click', (params) => {
  ctx.openView(ctx.model.uid + '-1', {
    mode: 'dialog',
    size: 'large',
    defineProperties: {}, // registra variáveis de contexto para o novo modal
  });
});

No modal recém-aberto, use as variáveis de contexto do gráfico através de ctx.view.inputArgs.XXX.

#Pré-visualizar e Salvar

• Clique em "Pré-visualizar" para carregar e executar o código do evento.
• Clique em "Salvar" para manter a configuração atual do evento.
• Clique em "Cancelar" para reverter ao último estado salvo.

Recomendações:

• Sempre use chart.off('event') antes de vincular para evitar execuções duplicadas ou aumento do uso de memória.
• Use operações leves (por exemplo, dispatchAction, setOption) dentro dos handlers de evento para evitar o bloqueio do processo de renderização.
• Valide com as opções do gráfico e consultas de dados para garantir que os campos manipulados no evento sejam consistentes com os dados atuais.