При изучении взаимосвязей или корреляций между двумя непрерывными переменными, Диаграмма рассеяния (или диаграмма рассеяния) является основным аналитическим инструментом. Построение точек данных на двумерной сетке на основе числовых координат X и Y позволяет диаграммам рассеяния выявлять кластеры, выбросы, тенденции и корреляции в сложных наборах данных, таких как затраты на маркетинг по сравнению с генерацией лидов или опыт сотрудников по сравнению с зарплатой.
Механика диаграмм рассеяния
В отличие от столбчатых или линейных диаграмм, основанных на категориях, диаграммы рассеяния используют числовые оси значений для обеих осей. В Apache ECharts установка type: 'scatter' предполагает данные, форматированные как массивы числовых координат из двух элементов [x, y] или объекты данных, сопоставленные с числовыми xAxis и yAxis конфигурациями.
1. Основная настройка
Чтобы создать базовую диаграмму рассеяния, определите type: 'value' на обеих осях и предоставьте числовые пары координат в массиве данных серии:
option = {
tooltip: {
trigger: 'item',
formatter: 'X: {c0}rnY: {c1}'
},
xAxis: {
type: 'value',
name: 'Расходы на рекламу ($k)'
},
yAxis: {
type: 'value',
name: 'Конверсии'
},
series: [
{
type: 'scatter',
symbolSize: 12,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.03, 7.24],
[12.0, 4.26],
[7.08, 4.82],
[5.02, 5.68]
]
}
]
};
Расширенные структурные техники
Диаграммы рассеяния могут включать динамическое масштабирование для представления третьей переменной (диаграмма пузырьков) или отображения наложений кластеров с несколькими категориями.
1. Переменный размер точек (эффект пузырьков)
Передайте пользовательскую функцию или сопоставление значений данных в symbolSize чтобы закодировать третий количественный показатель в размере точки:
option = {
tooltip: {
trigger: 'item',
formatter: function (param) {
return 'Расход: $' + param.data[0] + 'krn' +
'Выручка: $' + param.data[1] + 'krn' +
'ROAS: ' + param.data[2] + 'x';
}
},
xAxis: {
type: 'value',
name: 'Расход'
},
yAxis: {
type: 'value',
name: 'Выручка'
},
series: [
{
name: 'Кампании',
type: 'scatter',
symbolSize: function (data) {
return data[2] * 5; // Масштабировать размер пузыря по третьей переменной
},
data: [
[15, 120, 8.0],
[25, 180, 7.2],
[10, 50, 5.0],
[40, 380, 9.5],
[30, 210, 7.0]
],
itemStyle: {
color: '#5470c6',
opacity: 0.7
}
}
]
};
Тонкая настройка макета и стилей
Управление прозрачностью маркеров и добавление целевых линий тренда предотвращает образование плотных кластеров, превращающихся в сплошные визуальные пятна.
1. Полупрозрачные маркеры и стилистика кластеров
Применение обводки и полупрозрачного заполнения элементов позволяет сохранить видимость перекрывающихся точек данных в кластерах с высокой плотностью:
option = {
grid: {
left: '10%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value',
scale: true // Автоматически масштабировать оси min/max для плотной подгонки данных
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'scatter',
symbolSize: 16,
itemStyle: {
color: 'rgba(84, 112, 198, 0.6)',
borderColor: '#5470c6',
borderWidth: 2
},
data: [
[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
[155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8],
[176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2]
]
}
]
};
Стратегические лучшие практики
- Включите
scale: trueна числовых осях: Установитеscale: trueна обеих числовых осях, чтобы график автоматически масштабировался в пределах актуального диапазона данных, а не вынуждал начало отсчёта в(0,0). - Используйте прозрачность заливки для перекрытий: При построении сотен точек уменьшите прозрачность заливки до 0,4–0,6, чтобы зоны с плотным перекрытием выглядели естественно темнее.
- Предоставьте контекстные метки осей: Всегда явно помечайте оси X и Y единицами измерения (например, «$ в тысячах» или «Задержка в мс»), чтобы значения были сразу понятны без проверки всплывающих подсказок.