Ao avaliar a decomposição estrutural em métricas discretas, o Gráfico de Colunas Empilhadasoferece uma maneira eficiente de visualizar distribuições parte-todo. Diferentemente dos layouts agrupados que espalham as séries de dados horizontalmente, os gráficos empilhados acumulam valores verticalmente dentro de um único limite de coluna. Esse formato torna simples monitorar o crescimento total da categoria enquanto acompanha as proporções variáveis dos subcomponentes internos, como o tráfego de dispositivos dividido por sistema operacional ou a análise de despesas trimestrais por departamentos.
Os Mecanismos das Colunas Empilhadas
Os gráficos de colunas empilhadas dependem da atribuição de um identificador empilhamentoidêntico em múltiplas séries. Quando o motor de renderização detecta valores idênticos de empilhamentoem uma série com type: 'bar', ele empilha os valores numéricos sequencialmente ao longo do eixo Y vertical, em vez de renderizar colunas sobrepostas ou lado a lado.
1. Configuração Básica
Para criar um gráfico de colunas empilhadas básico, defina um eixo X baseado em categorias e aplique uma propriedade comum empilhamentoà cada série na sua sériesarray:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Direto', 'Busca Orgânica', 'Anúncios Pagos', 'Indicação']
},
xAxis: {
type: 'category',
data: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Direto',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Busca Orgânica',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Anúncios Pagos',
type: 'bar',
stack: 'total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Indicação',
type: 'bar',
stack: 'total',
data: [98, 77, 101, 99, 40, 120, 110]
}
]
};
Técnicas Estruturais Avançadas
Os gráficos de colunas empilhadas podem ser adaptados para mostrar distribuições em porcentagem ou agrupamentos subselecionados, dependendo das suas necessidades analíticas.
1. Colunas Empilhadas Normalizadas em 100%
Quando seu objetivo principal é comparar razões de proporção em vez de totais numéricos absolutos, converta seus valores de dados em porcentagens normalizadas que totalizem 100% por categoria:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Desktop', 'Mobile', 'Tablet']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'Desktop',
type: 'bar',
stack: 'percentage',
data: [60, 50, 45, 40]
},
{
name: 'Mobile',
type: 'bar',
stack: 'percentage',
data: [30, 40, 45, 50]
},
{
name: 'Tablet',
type: 'bar',
stack: 'percentage',
data: [10, 10, 10, 10]
}
]
};
2. Agrupamento Multi-Stack
Você pode combinar agrupamento e empilhamento em uma única visualização usando identificadores distintosstackidentificadores entre séries. Por exemplo, compare totais reais versus alvo, onde cada um é composto por subcomponentes empilhados:
option = {
legend: {
data: ['Produto A Real', 'Produto B Real', 'Produto A Meta', 'Produto B Meta']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Produto A Real',
type: 'bar',
stack: 'actual',
data: [120, 150, 180, 200]
},
{
name: 'Produto B Real',
type: 'bar',
stack: 'actual',
data: [80, 90, 100, 110]
},
{
name: 'Produto A Meta',
type: 'bar',
stack: 'target',
data: [130, 160, 190, 210]
},
{
name: 'Produto B Meta',
type: 'bar',
stack: 'target',
data: [90, 100, 110, 120]
}
]
};
Ajuste fino do layout e do estilo
O acabamento visual é crucial para colunas empilhadas para garantir que os segmentos permaneçam distintos sem causar fadiga visual.
1. Limites dos segmentos e pontas superiores arredondadas
Aplicar separadores de borda limpas entre os segmentos empilhados e restringir o arredondamento de cantos apenas ao segmento superior da série no empilhamento:
option = {
xAxis: {
type: 'category',
data: ['Jan', 'Fev', 'Mar', 'Abr']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Camada Base',
type: 'bar',
stack: 'total',
data: [320, 302, 301, 334],
itemStyle: {
color: '#4992ff',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Camada Média',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134],
itemStyle: {
color: '#7cffb2',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Camada Superior',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234],
itemStyle: {
color: '#fddd60',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [4, 4, 0, 0] // Cantos arredondados apenas no segmento superior
}
}
]
};
Melhores práticas estratégicas
- Limite o número de segmentos:Evite empilhar mais de 4 a 5 categorias por coluna. Além desse limite, comparar segmentos centrais entre colunas torna-se visualmente desafiador.
- Fixe os itens da linha de base na parte inferior:Coloque sua métrica mais importante ou maior subcomponente como o primeiro item no
seriesarray para que ele repouse diretamente na linha de base para alinhamento fácil. - Use uma paleta de alto contraste ou bordas:Aplicar linhas sutis de borda branca entre os segmentos para manter uma distinção clara quando cores adjacentes tiverem níveis semelhantes de contraste.