Чтобы подчеркнуть как направление тренда, так и общий объем в течение непрерывного времени, График площади обеспечивает выразительный визуальный подход. Заполняя область между линией тренда и горизонтальной осью, графики площади акцентируют внимание на относительной величине и общих изменениях объема в последовательностях, таких как потребление пропускной способности сервера, объем активных пользователей или ежедневная пропускная способность транзакций.
Механика графиков площади
Графики площади напрямую основаны на конфигурации линейного графика. Установив type: 'line' и включив свойство areaStyle в объекте серии, рендеринг-движок автоматически заполняет геометрическое пространство под линией до горизонтальной базовой линии.
1. Основная настройка
Чтобы создать базовый график площади, определите непрерывную ось X, установите серию type: 'line', и объявите пустой или настроенный объект areaStyle объект:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
areaStyle: {}, // Включает заполнение по умолчанию
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
Расширенные структурные техники
Графики площади можно улучшить с помощью современных градиентов цветов и плавных кривых, чтобы улучшить читаемость и визуальную привлекательность.
1. Стилизация градиентного заполнения
Заполнение сплошным цветом иногда может показаться тяжелым. Применение полупрозрачного линейного градиента создает современный, элегантный вид, при котором заполнение мягко исчезает вдоль нижней оси:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июнь']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
lineStyle: {
width: 3,
color: '#5470c6'
},
areaStyle: {
opacity: 0.8,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(84, 112, 198, 0.6)' },
{ offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
]
}
},
data: [320, 450, 410, 680, 890, 950]
}
]
};
2. Сравнение нескольких серий площадей с наложением
Когда отображаются несколько серий площадей на одном графике, важно настроить прозрачность заполнения, чтобы нижележащие линии данных оставались полностью видимыми:
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Входящий трафик', 'Исходящий трафик']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Входящий трафик',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [120, 200, 450, 600, 700, 380]
},
{
name: 'Исходящий трафик',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.4 },
data: [80, 140, 310, 420, 510, 260]
}
]
};
Тонкая настройка макета и интервалов
Поскольку заполнение области идет до самой базовой линии оси Y, настройка непрерывных границ сохраняет выравнивание заполнения с краем холста.
1. Бесшовное выравнивание по краям
Установив boundaryGap: falseна категории оси X, заполнение начинается на абсолютном левом крае сетки контейнера и чисто заканчивается на дальнем правом крае:
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
areaStyle: {
color: 'rgba(145, 204, 117, 0.3)'
},
lineStyle: {
color: '#91cc75',
width: 2
},
data: [150, 230, 224, 318]
}
]
};
Стратегические лучшие практики
- Используйте низкую прозрачность заполнения:Плотные области заполнения блокируют линии сетки и перекрывающиеся ряды. Всегда поддерживайте уровень прозрачности около 20–50% для высокой контрастности.
- Ограничьте количество рядов до 2 или 3:Слишком много перекрывающихся областей вызывает визуальную путаницу. Для 4 или более накопленных непрерывных наборов данных вместо этого используйте диаграмму с наложенными областями.
- Установите
boundaryGap: false:Удаление горизонтальных отступов на временных осях позволяет заполнению областей охватывать всю ширину сетки, не оставляя неловких пустых промежутков на левом и правом краях.