Quando você precisa acompanhar tanto o volume total geral quanto as contribuições individuais de subcomponentes ao longo do tempo, o Gráfico de Área Empilhadaé a ferramenta de visualização ideal. O empilhamento de preenchimentos de área verticalmente cria uma visualização contínua composta, onde a linha superior representa o total agregado, enquanto as larguras das faixas individuais mostram as contribuições das subcategorias em mudança, como o tráfego total do site dividido por mecanismos de busca, orgânico e canais de referência direta ao longo de vários meses.
Os Mecanismos dos Gráficos de Área Empilhada
Os gráficos de área empilhada combinam configurações de séries de linha com atributos correspondentes stack atributos. Quando o motor de renderização detecta identificadores idênticos stack em múltiplas séries com type: 'line' e areaStyle ativos, ele empilha cada ponto de dados sequencialmente acima do caminho da linha da série anterior ao longo do eixo vertical Y.
1. Configuração Básica
Para construir um gráfico de área empilhada básico, defina um eixo X contínuo, defina type: 'line' em cada série, habilite areaStyle, e atribua um identificador idêntico stack em todas as séries:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['E-mail', 'Anúncios da União', 'Anúncios de Vídeo', 'Direto']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'E-mail',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Anúncios da União',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Anúncios de Vídeo',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direto',
type: 'line',
stack: 'Total',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
Técnicas Estruturais Avançadas
Os gráficos de área empilhada podem ser configurados para focar tanto no crescimento acumulado geral quanto nas mudanças proporcionais relativas ao longo do tempo.
1. Gráfico de Área de Porcentagem Normalizada em 100%
Quando avaliar mudanças proporcionais em vez do volume agregado total ao longo do tempo, normalize seus dados para 100% em cada ponto horizontal de tempo:
option = {
tooltip: {
trigger: 'axis',
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Desktop', 'Mobile', 'Tablet']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2023', '2024', '2025', '2026']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'Desktop',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [65, 55, 48, 40]
},
{
name: 'Mobile',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [25, 35, 42, 50]
},
{
name: 'Tablet',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [10, 10, 10, 10]
}
]
};
Afinando Layout e Estilo
Como as áreas empilhadas cobrem completamente o plano de fundo, ajustar a opacidade de preenchimento e os traços das linhas ajuda a manter as camadas individuais claras e legíveis.
1. Opacidade personalizada da camada e separadores de borda
Definir traços de linha sólidos sobre preenchimentos de área ligeiramente translúcidos cria limites visuais nítidos entre as faixas empilhadas adjacentes:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Produto A',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#5470c6' },
areaStyle: { color: '#5470c6', opacity: 0.7 },
data: [120, 150, 180, 210]
},
{
name: 'Produto B',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#91cc75' },
areaStyle: { color: '#91cc75', opacity: 0.7 },
data: [220, 280, 250, 310]
},
{
name: 'Produto C',
type: 'line',
stack: 'volume',
smooth: true,
lineStyle: { width: 2, color: '#fac858' },
areaStyle: { color: '#fac858', opacity: 0.7 },
data: [150, 190, 220, 260]
}
]
};
Melhores Práticas Estratégicas
- Fixe as séries estáveis na parte inferior:Coloque a série maior ou menos volátil na parte inferior da pilha para estabelecer uma base previsível para as faixas acima dela.
- Limite o número de faixas:Empilhar mais de 4 a 5 séries torna difícil avaliar com precisão as faixas do meio. Considere agrupar categorias menores em uma categoria ‘Outros’.
- Use
axisPointer: { type: 'cross' }:Combinar os cruzadores de hover com uma dica de ferramenta contínua torna a identificação de valores específicos de data em pilhas verticais densas direta.