#Пользовательские события взаимодействия

Пишите JS-код в редакторе событий и регистрируйте интерактивные действия через экземпляр ECharts chart, чтобы обеспечить взаимосвязь. Например, вы можете переходить на новую страницу или открывать всплывающие окна для детализации данных.

#Регистрация и отмена регистрации событий

• Регистрация: chart.on(eventName, handler)
• Отмена регистрации: chart.off(eventName, handler) или chart.off(eventName) для удаления всех событий с указанным именем.

Обратите внимание: В целях безопасности настоятельно рекомендуется отменять регистрацию события перед его повторной регистрацией!

#Структура данных параметра params в функции-обработчике

Часто используются поля, такие как params.data и params.name.

#Пример: выделение при клике

chart.off('click');
chart.on('click', (params) => {
  const { seriesIndex, dataIndex } = params;
  // Выделить текущую точку данных
  chart.dispatchAction({ type: 'highlight', seriesIndex, dataIndex });
  // Снять выделение с остальных
  chart.dispatchAction({ type: 'downplay', seriesIndex });
});

#Пример: переход на страницу по клику

chart.off('click');
chart.on('click', (params) => {
  const order_date = params.data[0]
  
  // Вариант 1: Внутренняя навигация по приложению без принудительного обновления страницы (рекомендуется), требуется только относительный путь.
  ctx.router.navigate(`/new-path/orders?order_date=${order_date}`)

  // Вариант 2: Переход на внешнюю страницу, требуется полный URL.
  window.location.href = `https://www.host.com/new-path/orders?order_date=${order_date}`

  // Вариант 3: Открытие внешней страницы в новой вкладке, требуется полный URL.
  window.open(`https://www.host.com/new-path/orders?order_date=${order_date}`)
});

#Пример: открытие всплывающего окна с деталями (детализация данных)

chart.off('click');
chart.on('click', (params) => {
  ctx.openView(ctx.model.uid + '-1', {
    mode: 'dialog',
    size: 'large',
    defineProperties: {}, // Регистрация контекстных переменных для нового диалогового окна
  });
});

В новом открытом диалоговом окне используйте контекстные переменные, объявленные в диаграмме, через ctx.view.inputArgs.XXX.

#Предварительный просмотр и сохранение

• Нажмите «Предварительный просмотр», чтобы загрузить и выполнить код события.
• Нажмите «Сохранить», чтобы сохранить текущую конфигурацию события.
• Нажмите «Отмена», чтобы вернуться к последнему сохраненному состоянию.

Рекомендации:

• Всегда используйте chart.off('event') перед привязкой, чтобы избежать повторных выполнений или увеличения потребления памяти.
• В обработчиках событий старайтесь использовать легковесные операции (например, dispatchAction, setOption), чтобы не блокировать процесс рендеринга.
• Проверяйте соответствие полей, обрабатываемых в событии, текущим данным, используя параметры диаграммы и запросы данных.