Настройка интервалов столбцов в ECharts с tooltip axis

При использовании tooltip: { trigger: 'axis' } в ECharts tooltip всегда появляется в центре категории, а не над индивидуальными столбцами. Чтобы уменьшить расстояние между столбцами и добиться их центрирования внутри категории, используйте параметры barGap и barCategoryGap в конфигурации серии. Вот решение:

option = {
 tooltip: {
 trigger: "axis"
 },
 xAxis: {
 type: 'category',
 data: ['Категория 1', 'Категория 2']
 },
 yAxis: {},
 series: [{
 type: 'bar',
 data: [120, 200],
 barGap: '0%', // Убирает интервал между столбцами внутри категории
 barCategoryGap: '20%' // Уменьшает пространство между категориями
 }]
};

Содержание

• Поведение tooltip с trigger: ‘axis’ в ECharts
• Параметры управления интервалами между столбцами
• Настройка интервалов для центрирования столбцов
• Альтернативные решения для точного позиционирования
• Источники
• Заключение

Поведение tooltip с trigger: ‘axis’ в ECharts

При использовании trigger: 'axis' ECharts автоматически позиционирует tooltip в центре категории, независимо от количества столбцов в этой категории. Это фундаментальное поведение библиотеки, которое невозможно изменить стандартными средствами. Почему так происходит?

Каждая категория (например, “Категория 1” в вашем примере) рассматривается как единое целое. Все столбцы внутри одной категории группируются вместе, и tooltip появляется в центре этой группы. Даже если вы уменьшите расстояние между столбцами до нуля, tooltip останется в геометрическом центре всей группы, а не над каждым столбцом по отдельности.

Это ограничение архитектуры ECharts: trigger: ‘axis’ всегда показывает все значения категории, а не отдельные элементы.

Параметры управления интервалами между столбцами

ECharts предоставляет два ключевых параметра для контроля интервалов:

barGap

Управляет интервалом между столбцами внутри одной категории:

• '0%' - столбцы соприкасаются друг с другом
• '30%' (по умолчанию) - стандартный интервал
• '-50%' - столбцы перекрываются

barCategoryGap

Управляет расстоянием между категориями:

• '20%' (по умолчанию) - стандартный интервал
• '10%' - уменьшенный интервал
• '40%' - увеличенный интервал

Важные замечания:

• Эти параметры работают только при type: 'bar'
• Изменение barCategoryGap влияет на все категории одновременно
• Параметры измеряются в процентах от ширины столбца

Настройка интервалов для центрирования столбцов

Чтобы столбцы были расположены ближе к центру категории (чтобы tooltip попадал ближе к каждому столбцу), используйте следующую конфигурацию:

series: [{
 type: 'bar',
 data: [120, 200],
 // Убираем интервалы между столбцами внутри категории
 barGap: '0%',
 
 // Уменьшаем пространство между категориями
 barCategoryGap: '10%',
 
 // Опционально: увеличиваем общее пространство для графика
 // для лучшего центрирования
 label: {
 position: 'top'
 }
}]

Дополнительные настройки для тонкой настройки:

1. Регулировка положения графика:

grid: {
 left: '15%', // Увеличиваем левый отступ
 right: '15%', // Увеличиваем правый отступ
 bottom: '10%', // Регулируем нижний отступ
 containLabel: true
}

2. Контроль ширины столбцов:

series: [{
 barWidth: '40%', // Увеличиваем ширину столбцов
 // ...
}]

3. Визуальное разделение столбцов (если barGap: '0%' недостаточно):

series: [{
 itemStyle: {
 borderRadius: [4, 4, 0, 0] // Скругляем углы для визуального разделения
 },
 // ...
}]

Альтернативные решения для точного позиционирования

Если вам требуется точное позиционирование tooltip над каждым столбцом, есть два основных подхода:

1. Использование trigger: 'item'

Самый простой способ изменить поведение tooltip:

tooltip: {
 trigger: "item" // Теперь tooltip появится над каждым столбцом
}

Недостаток: Tooltip будет показывать только одно значение, а не всю категорию.

2. Кастомизация позиции tooltip

Продвинутый подход с использованием formatter и позиционирования:

tooltip: {
 trigger: "axis",
 formatter: function(params) {
 // Кастомная логика форматирования
 return params.map(p => `${p.name}: ${p.value}`).join('<br/>');
 },
 position: function(point, params, dom, rect, size) {
 // Кастомная позиция
 return [point[0], point[1]];
 }
}

3. Разделение на отдельные серии

Если вам нужно полностью контролировать положение каждого столбца:

series: [
 { // Первый столбец
 type: 'bar',
 data: [120],
 name: 'Серия 1'
 },
 { // Второй столбец
 type: 'bar', 
 data: [200],
 name: 'Серия 2',
 xAxisIndex: 0,
 yAxisIndex: 0
 }
]

Источники

1. ECharts Official Documentation — Параметры barGap и barCategoryGap: https://echarts.apache.org/en/option.html#series-bar.barGap
2. Apache ECharts Handbook — Основы столбчатых графиков: https://apache.github.io/echarts-handbook/en/how-to/chart-types/bar/basic-bar/
3. Stack Overflow — Позиционирование tooltip над столбцами: https://stackoverflow.com/questions/45415925/position-tooltip-in-center-of-bar
4. ECharts Examples — Примеры настройки интервалов: https://echarts.apache.org/examples/en/editor.html?c=bar-simple
5. Rich Text Labels — Дополнительные настройки оформления: https://echarts.apache.org/handbook/en/how-to/label/rich-text/

Заключение

При использовании tooltip: { trigger: 'axis' } в ECharts невозможно добиться точного позиционирования tooltip над каждым столбцом, так как библиотека всегда центрирует tooltip в категории. Для уменьшения расстояния между столбцами используйте:

• barGap: '0%' для устранения интервалов внутри категории
• barCategoryGap: '10%' для уменьшения пространства между категориями
• Регулировку параметров grid для улучшения центрирования графика

Если требуется точное позиционирование tooltip, рассмотрите альтернативные подходы: использование trigger: 'item', кастомный formatter или разделение столбцов на отдельные серии. Помните, что выбор метода зависит от ваших требований к представлению данных и интерактивности графика.