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

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

![clipboard-image-1761489617](https://static-docs.nocobase.com/clipboard-image-1761489617.png)

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

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

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

![20251026222859](https://static-docs.nocobase.com/20251026222859.png)

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

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

## Пример: переход на страницу по клику
```js
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}`)
});
```

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

![clipboard-image-1761490321](https://static-docs.nocobase.com/clipboard-image-1761490321.png)

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

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

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