Para enfatizar tanto la dirección de la tendencia como el volumen total a lo largo del tiempo continuo, el Gráfico de áreaproporciona un enfoque visual expresivo. Al rellenar la región entre la línea de tendencia y el eje horizontal, los gráficos de área destacan la magnitud relativa y los cambios totales en el volumen a lo largo de secuencias, como el consumo de ancho de banda del servidor, el volumen de usuarios activos o el tráfico diario de transacciones.
La mecánica de los gráficos de área
Los gráficos de área se basan directamente en la configuración del gráfico de líneas. Al establecer type: 'line' y incluyendo un areaStylepropiedad en un objeto de serie, el motor de renderizado rellena automáticamente el espacio geométrico debajo de la trayectoria de la línea hasta la línea base horizontal.
1. Configuración esencial
Para crear un gráfico de área básico, define un eje X continuo, establece la serie type: 'line', y declara un objeto areaStylevacío o personalizado:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
smooth: true,
areaStyle: {}, // Habilita el relleno de área predeterminado
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
Técnicas estructurales avanzadas
Los gráficos de área pueden mejorarse con gradientes de color modernos y curvas suaves para mejorar la legibilidad y el acabado visual.
1. Estilo de relleno con degradado
Un relleno de color sólido a veces puede sentirse pesado. Aplicar un degradado lineal semitransparente crea una apariencia moderna y elegante donde el relleno se desvanece suavemente hacia el eje inferior:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun']
},
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. Comparación de áreas múltiples superpuestas
Cuando se muestran múltiples series de áreas en un solo gráfico, ajustar la opacidad del relleno es crucial para que las rutas de datos subyacentes permanezcan completamente visibles:
option = {
tooltip: {
trigger: 'axis'
},
leyenda: {
datos: ['Tráfico entrante', 'Tráfico saliente']
},
ejeX: {
tipo: 'categoría',
margenDeBorde: false,
datos: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
},
ejeY: {
tipo: 'valor'
},
series: [
{
nombre: 'Tráfico entrante',
tipo: 'línea',
suave: true,
estiloDeArea: { opacidad: 0.4 },
datos: [120, 200, 450, 600, 700, 380]
},
{
nombre: 'Tráfico saliente',
tipo: 'línea',
suave: true,
estiloDeArea: { opacidad: 0.4 },
datos: [80, 140, 310, 420, 510, 260]
}
]
};
Ajuste fino del diseño y el espaciado
Dado que los rellenos de área se extienden hasta la línea base del eje Y, configurar márgenes de borde continuos mantiene el relleno alineado limpiamente con el borde de la superficie de dibujo.
1. Alineación continua de bordes
Al establecer margenDeBorde: falseen el eje X de categoría, el relleno comienza en el borde izquierdo absoluto de la cuadrícula del contenedor y termina limpiamente en el extremo derecho:
option = {
cuadrícula: {
izquierda: '3%',
derecha: '4%',
abajo: '3%',
contieneEtiqueta: true
},
ejeX: {
tipo: 'categoría',
margenDeBorde: false,
datos: ['Q1', 'Q2', 'Q3', 'Q4']
},
ejeY: {
tipo: 'valor'
},
series: [
{
tipo: 'línea',
suave: true,
símbolo: 'círculo',
tamañoDeSímbolo: 6,
estiloDeArea: {
color: 'rgba(145, 204, 117, 0.3)'
},
estiloDeLínea: {
color: '#91cc75',
ancho: 2
},
datos: [150, 230, 224, 318]
}
]
};
Prácticas recomendadas estratégicas
- Utilice opacidades bajas de relleno:Los rellenos de área sólidos bloquean las líneas de cuadrícula subyacentes y las series superpuestas. Mantenga siempre niveles de transparencia alrededor del 20% al 50% para un alto contraste.
- Mantenga las series en 2 o 3:Demasiadas formas de área superpuestas causan confusión visual. Para 4 o más conjuntos de datos continuos acumulativos, utilice en su lugar un gráfico de área apilada.
- Establezca
margenDeBorde: false:Eliminar los márgenes horizontales en los ejes de tiempo permite que los rellenos de área cubran el ancho total de la cuadrícula sin dejar huecos incómodos en los bordes izquierdo y derecho.