Cuando necesitas rastrear tanto el volumen total general como las contribuciones individuales de los subcomponentes a lo largo del tiempo, la Gráfico de área apiladaes la herramienta de visualización ideal. Apilar los rellenos de área verticalmente crea una vista continua compuesta donde la línea superior representa el total acumulado, mientras que el ancho de cada banda individual muestra las contribuciones cambiantes de las subcategorías, como el tráfico web total desglosado por motor de búsqueda, orgánico y canales de referencia directa durante varios meses.
La mecánica de los gráficos de área apilada
Los gráficos de área apilada combinan configuraciones de series de líneas con atributos coincidentes de apiladoatributos. Cuando el motor de renderizado detecta identificadores idénticos de apiladoa lo largo de múltiples series con type: 'line' y areaStyleactivos, apila cada punto de datos secuencialmente por encima de la ruta de la línea de la serie anterior a lo largo del eje vertical Y.
1. Configuración esencial
Para construir un gráfico de área apilada básico, define un eje X continuo, establece type: 'line'en cada serie, habilita areaStyle, y asigna un identificador idéntico de apiladoidentificador en todas las series:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
leyenda: {
data: ['Correo electrónico', 'Anuncios Unión', 'Anuncios de video', 'Directo']
},
ejeX: {
tipo: 'categoría',
margenDeBorde: false,
datos: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom']
},
ejeY: {
tipo: 'valor'
},
series: [
{
nombre: 'Correo electrónico',
tipo: 'line',
apilado: 'Total',
estiloArea: {},
datos: [120, 132, 101, 134, 90, 230, 210]
},
{
nombre: 'Anuncios Unión',
tipo: 'line',
apilado: 'Total',
estiloArea: {},
datos: [220, 182, 191, 234, 290, 330, 310]
},
{
nombre: 'Anuncios de video',
tipo: 'line',
apilado: 'Total',
estiloArea: {},
datos: [150, 232, 201, 154, 190, 330, 410]
},
{
nombre: 'Directo',
tipo: 'line',
apilado: 'Total',
estiloArea: {},
datos: [320, 332, 301, 334, 390, 330, 320]
}
]
};
Técnicas estructurales avanzadas
Los gráficos de área apilada se pueden configurar para centrarse ya sea en el crecimiento acumulado general o en los cambios proporcionales relativos a lo largo del tiempo.
1. Gráfico de área de porcentaje normalizado al 100%
Cuando evalúas cambios proporcionales en lugar del volumen total acumulado a lo largo del tiempo, normaliza tu conjunto de datos al 100% por cada punto de tiempo horizontal:
option = {
tooltip: {
trigger: 'axis',
formatter: '{b}rn{a0}: {c0}%rn{a1}: {c1}%rn{a2}: {c2}%'
},
legend: {
data: ['Escritorio', 'Móvil', 'Tableta']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2023', '2024', '2025', '2026']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'Escritorio',
type: 'line',
stack: 'porcentaje',
smooth: true,
areaStyle: {},
data: [65, 55, 48, 40]
},
{
name: 'Móvil',
type: 'line',
stack: 'porcentaje',
smooth: true,
areaStyle: {},
data: [25, 35, 42, 50]
},
{
name: 'Tableta',
type: 'line',
stack: 'porcentaje',
smooth: true,
areaStyle: {},
data: [10, 10, 10, 10]
}
]
};
Ajuste fino del diseño y estilo
Dado que las áreas apiladas cubren completamente el fondo, ajustar la opacidad de relleno y los trazos de línea ayuda a mantener las capas individuales claras y legibles.
1. Opacidad personalizada de capas y separadores de borde
Establecer trazos de línea sólidos sobre rellenos de área ligeramente translúcidos crea límites visuales nítidos entre las bandas apiladas adyacentes:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['T1', 'T2', 'T3', 'T4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Producto A',
type: 'line',
stack: 'volumen',
smooth: true,
lineStyle: { width: 2, color: '#5470c6' },
areaStyle: { color: '#5470c6', opacity: 0.7 },
data: [120, 150, 180, 210]
},
{
name: 'Producto B',
type: 'line',
stack: 'volumen',
smooth: true,
lineStyle: { width: 2, color: '#91cc75' },
areaStyle: { color: '#91cc75', opacity: 0.7 },
data: [220, 280, 250, 310]
},
{
name: 'Producto C',
type: 'line',
stack: 'volumen',
smooth: true,
lineStyle: { width: 2, color: '#fac858' },
areaStyle: { color: '#fac858', opacity: 0.7 },
data: [150, 190, 220, 260]
}
]
};
Prácticas recomendadas estratégicas
- Anclar las series estables en la parte inferior:Coloque la serie más grande o menos volátil en la parte inferior de la pila para establecer una base predecible para las bandas superiores.
- Limitar el número de bandas:Apilar más de 4 a 5 series hace que las bandas centrales sean difíciles de evaluar con precisión. Considere agrupar las categorías menores en una categoría de ‘Otros’.
- Use
axisPointer: { type: 'cruz' }:Combinar las retículas de paso con una sugerencia continua hace que localizar valores específicos de fecha en pilas verticales densas sea sencillo.