#Кастомні інтерактивні події

Пишіть 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: Перехід на зовнішню сторінку. Потрібне повне посилання.
  window.location.href = `https://www.host.com/new-path/orders?order_date=${order_date}`

  // Варіант 3: Відкриття зовнішньої сторінки в новій вкладці. Потрібне повне посилання.
  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) всередині обробників подій, щоб уникнути блокування процесу рендерингу.
• Перевіряйте за допомогою параметрів діаграми та запитів даних, щоб переконатися, що поля, оброблені в події, відповідають поточним даним.