При отслеживании постепенного снижения на последовательных этапах или конверсионных каналах, График воронки является стандартным визуальным инструментом. Отображая значения в виде стекирующихся трапециевидных блоков, которые сужаются или расширяются на каждом этапе, графики воронки позволяют пользователям визуально выявить узкие места конверсии, скорости снижения и эффективность процесса за один взгляд — например, этапы продажного канала, процессы оформления заказов в электронной коммерции или воронки генерации лидов.
Механика графиков воронки
В Apache ECharts графики воронки отображаются с помощью type: 'funnel'. Каждый объект данных содержит name и числовое value. Движок автоматически сортирует данные от наибольшего к наименьшему (или наоборот) и масштабирует ширину каждого трапециевидного блока относительно максимального значения в серии.
1. Основная настройка
Чтобы создать базовый график воронки, укажите этапы категорий в массиве данных серии и установите type: 'funnel':
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center',
data: ['Запросы', 'Предложения', 'Цитаты', 'Переговоры', 'Сделки']
},
series: [
{
name: 'Воронка продаж',
type: 'funnel',
left: '10%',
top: '18%',
bottom: '10%',
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
data: [
{ value: 100, name: 'Запросы' },
{ value: 80, name: 'Предложения' },
{ value: 60, name: 'Цитаты' },
{ value: 40, name: 'Переговоры' },
{ value: 20, name: 'Сделки' }
]
}
]
};
Расширенные структурные техники
Графики воронки можно настраивать с помощью пирамидальных компоновок, пользовательских выравниваний этапов или двойных наложений воронок для сравнения различных конверсионных каналов.
1. Обратная пирамидальная компоновка и пользовательские выравнивания
Измените sort: 'ascending' для создания обратной пирамиды, или настройте funnelAlign чтобы выровнять этапы по левому или правому краю:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Пирамида конверсии',
type: 'funnel',
left: '15%',
top: '18%',
bottom: '10%',
width: '70%',
sort: 'ascending', // Отображает наименьшую стадию сверху, наибольшую — снизу
funnelAlign: 'center',
label: {
show: true,
position: 'right'
},
data: [
{ value: 20, name: 'Этап 1: Осведомленность' },
{ value: 40, name: 'Этап 2: Интерес' },
{ value: 60, name: 'Этап 3: Принятие решения' },
{ value: 80, name: 'Этап 4: Действие' }
]
}
]
};
Тонкая настройка макета и стилей этапов
Добавление промежутков, закруглённых углов и пользовательских форматтеров меток создаёт чёткое пространство между этапами конверсии.
1. Настройка расстояния между этапами и меток с процентами
Управляйте промежутка расстоянием между трапециями и используйте пользовательские форматтеры меток для выделения процентного сохранения на каждом этапе:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} Пользователей'
},
series: [
{
name: 'Вовлечение пользователей',
type: 'funnel',
left: '10%',
top: '10%',
bottom: '10%',
width: '80%',
gap: 6, // Добавляет чёткое разделение между этапами
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
borderRadius: 4
},
label: {
show: true,
position: 'inside',
formatter: '{b}n{c} ({d}%)',
color: '#fff',
fontSize: 12
},
data: [
{ value: 5000, name: 'Посещения приложения' },
{ value: 3400, name: 'Регистрации' },
{ value: 2100, name: 'Настройка профиля' },
{ value: 1200, name: 'Первое действие' },
{ value: 800, name: 'Подписки' }
]
}
]
};
Стратегические лучшие практики
- Сохраняйте последовательность этапов: Диаграммы воронки основаны на логике последовательного потока. Убедитесь, что элементы данных отражают реальные пошаговые процессы, а не несвязанные категории.
- Используйте
промежуткадля чётких визуальных границ этапов: Установка небольшогопромежутка(например, от 4 до 6 пикселей) между трапециями предотвращает слияние соседних цветов в единый блок. - Отображайте проценты этапов: Комбинируйте абсолютные значения с процентами на каждом этапе (например, используя
{d}%в форматтерах меток), чтобы пользователи могли мгновенно оценить коэффициенты отказов на каждом этапе.