Особенности написания JS кода для стандартных ECharts виджетов

Изменение ширины меток оси в диаграммах

Для изменения ширины меток оси (axisLabel) используйте следующий код:

w.xAxis.axisLabel.rotationMode = null;

Данный код отключает автоматическое вращение меток, что позволяет вручную настроить их отображение.

О событиях (events) в ECharts

chart.on

Рекомендуемый способ прослушивания событий в ECharts-виджетах – использование метода chart.on('событие', функция-слушатель):

myChart.on('click', function (params) {
  console.log(params);
});

Данный метод аналогичен методу element.addEventListener('событие', слушатель) в JavaScript и подчиняется тем же правилам:

Добавленный слушатель (listener) на событие будет срабатывать до следующего пересоздания виджета до тех пор пока вы его не снимете.
Отписаться от события слушателя можно с помощью метода chart.off(), передав ему название события и соответствующую функцию-слушатель:
chart.off('событие', функция-слушатель)

Важно помнить, что когда вы добавляете слушателя на событие, существует риск создать циклическую зависимость, особенно если в нём выполняется сложный или ресурсоемкий код. В результате такая зависимость может привести к постепенному снижению производительности страницы: она начнёт медленнее реагировать на действия пользователей и даже подвисать. Например:

myChart.on('rendered', () => {
  myChart.resize()
});

Такое событие будет вызывать бесконечный цикл срабатывания слушателя, т.к после завершения .resize() виджет вызывает событие 'rendered' и получается цепочка risize → rendered → resize . Поэтому обязательно изучайте документацию ECharts относительно методов и событий, которые вызывают друг друга, чтобы избежать подобной проблемы.

ECharts поддерживает регистрацию одноразовых слушателей – аналог параметра once в методе addEventListener JavaScript. Например:

// Функция одноразового слушателя
changeChartSizeOnceFinishedHandler = () => {
        // Здесь код который может вызывать цикличность, или же просто
        // действия которые нужно выполнить только один раз
        this.changeChartSizeIfNeeded();
        // После действий сразу отписка
        this.chart.off('finished', this.changeChartSizeOnceFinishedHandler);
};
// Добавляем одноразового слушателя
this.chart.on('finished', this.changeChartSizeOnceFinishedHandler);

В таком случае слушатель срабатывает только один раз.

Такой подход гарантирует выполнение кода только один раз. Вы будете добавлять события поверх имеющихся, поэтому вы не переопределите всех других слушателей или событие глобально.

onclick на элементе графика

В ECharts также предусмотрена возможность назначения обработчика непосредственно на элементы графического представления (графики). Рассмотрим пример добавления функции на событие клика именно на конкретном элементе графика:

const option = {
  graphic: [
    {
      type: 'rect',
      left: 100,
      top: 100,
      shape: { width: 100, height: 50 },
      style: { fill: 'orange' },
      // Обработчик клика по элементу графика
      onclick: function () {
        console.log('Clicked rect (graphic.onclick)');
      }
    }
  ],
  series: [
    {
      type: 'bar',
      data: [10, 20, 30]
    }
  ]
};
chart.setOption(option);
// Обработчик клика по всему chart'у
chart.on('click', function (params) {
  console.log('Global chart click:', params);
});

Что произойдет при различных сценариях взаимодействия:

Клик по прямоугольнику: будут вызваны оба обработчика – graphic.onclick, и chart.on('click').
Клик по бару: вызовется только chart.on('click'), graphic.onclick не сработает.

То есть это не то же самое, что и, например, в JavaScript метод element.onclick = () = {}. Мы не теряем таким образом всех других слушателей, мы просто меняем основное действие на событие клика по конкретному элементу графика.

graphic.onclick НЕ отменяет chart.on('click') – они работают параллельно.

graphic.onclick срабатывает только при клике на конкретный graphic-элемент.
chart.on('click') срабатывает при клике на любую часть графика, включая graphic, если:
- graphic не останавливает всплытие (обычно не останавливает).
- вы обрабатываете params.componentType === 'graphic' (если нужно отличить, что кликнуто).

Низкоуровневый обработчик chart.getZr().on

Для работы с базовыми событиями отрисовки можно использовать метод chart.getZr().on('событие', слушатель), который предоставляет доступ к событиям движка ZRender - низкоуровневой библиотеки визуализации, лежащей в основе ECharts.

Например, вот как выглядит регистрация простого обработчика нажатия кнопки мыши:

chart.getZr().on('click', function (event) {
  console.log('ZRender click:', event.offsetX, event.offsetY);
});

Здесь объект event содержит базовые свойства, такие как:

offsetX, offsetY - координаты клика.
target – элемент graphic, если клик был по нему.
Нет данных о series, data, и т.д.

Основные сценарии использования:

Для кастомных интерактивных элементов (graphic).
Для трекинга мыши/клавиатуры напрямую.
Для реализации сложных UI-задач, не связанных с данными.

chart.on('click', (params) => {
  console.log('chart.on', params);  // Клик по серии: есть данные
});
chart.getZr().on('click', (event) => {
  console.log('zr.on', event);      // Всегда срабатывает, но без данных
})

Клик по series вызовет оба обработчика, но:

chart.on даст seriesIndex, data, name, value
zr.on даст только координаты и target.

Вывод:

chart.on(...) – высокоуровневые события от ECharts. Содержат полную информацию о структуре данных (series, legend, data, graphic), облегчая разработку интерактивных компонентов на основе конкретных элементов визуализации.
getZr().on(...) – низкоуровневые события от ZRender. Позволяют получать "сырые" события напрямую с поверхности холста (canvas), такие как движения мыши, нажатия клавиш и взаимодействия с простыми графическими объектами.

Как выбрать слушатель?

Обработка кликов по сериям, легенде	`chart.on(...)`
Обработка кликов по кастомным объектам (`graphic`)	`zr.on(...)` или `graphic.onclick`
Фиксирование мыши в фоне или по всему канвасу	`zr.on(...)`
Получение данных графика (value, series)	`chart.on(...)`

Список событий ECharts

Событие	chart.on (ECharts) ✅	getZr().on (ZRender) ✅	Комментарий

Событие	chart.on (ECharts) ✅	getZr().on (ZRender) ✅	Комментарий
`click`	✅	✅	Клик по элементу серии, легенде, graphic или холсту
`dblclick`	✅	✅	Двойной клик
`mousedown`	❌	✅	Нажатие мыши
`mouseup`	❌	✅	Отпускание кнопки мыши
`mousemove`	❌	✅	Движение мыши
`mouseover`	✅	✅	Наведение на объект (в ECharts – серия, легенда и т.д.)
`mouseout`	✅	✅	Увод мыши с объекта
`globalout`	❌	✅	Увод мыши за пределы канваса
`contextmenu`	❌	✅	Правый клик мышью (нужно отключать контекстное меню браузера вручную)
`legendselectchanged`	✅	❌	Выбор/отмена легенды
`legendhoverlink`	✅	❌	Наведение на легенду
`datazoom`	✅	❌	Пользователь изменил зум (если есть dataZoom)
`pieselectchanged`	✅	❌	Изменение выбора в круговой диаграмме
`rendered`	✅	❌	График отрисован
`finished`	✅	❌	Анимация завершена
`highlight`	✅	❌	Наведение на элемент (через API)
`downplay`	✅	❌	Снятие подсветки (через API)

Смотрите также

Форматирование с помощью JS

На этой странице

1 Изменение ширины меток оси в диаграммах
2 О событиях (events) в ECharts

Нужна дополнительная помощь?

Свяжитесь с технической поддержкой.