Para analisar divisões de componentes entre itens com títulos de categoria longos, o Gráfico de Barras Empilhadas é a escolha ideal. Ao empilhar segmentos de dados horizontalmente da esquerda para a direita ao longo do eixo Y, essa visualização mantém a clareza de rótulos longos ao mesmo tempo em que mostra tanto os totais gerais das categorias quanto a divisão proporcional interna. Funciona excepcionalmente bem para resultados demográficos de pesquisas, alocação de recursos de projetos por departamento ou pipelines de conversão multi-canal.
O Funcionamento das Barras Horizontais Empilhadas
Criar um gráfico horizontal empilhado envolve usar a mesma empilhamentopropriedade dos gráficos de colunas empilhadas, combinada com um eixo Y baseado em categorias. Quando múltiplos type: 'bar'séries compartilham uma chave de empilhamentoidêntica em uma orientação horizontal, o motor de renderização acumula valores da esquerda para a direita ao longo do eixo X.
1. Configuração Básica
Para criar um gráfico de barras empilhadas básico, defina yAxis para type: 'category', xAxis para type: 'value', e atribua uma chave correspondente empilhamentoa cada série:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legenda: {
data: ['Engenharia', 'Produto', 'Design', 'Marketing']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Projeto Alpha', 'Projeto Beta', 'Projeto Gama', 'Projeto Delta']
},
series: [
{
name: 'Engenharia',
type: 'bar',
stack: 'alocacao',
data: [320, 302, 301, 334]
},
{
name: 'Produto',
type: 'bar',
stack: 'alocacao',
data: [120, 132, 101, 134]
},
{
name: 'Design',
type: 'bar',
stack: 'alocacao',
data: [220, 182, 191, 234]
},
{
name: 'Marketing',
type: 'bar',
stack: 'alocacao',
data: [150, 212, 201, 154]
}
]
};
Técnicas Estruturais Avançadas
Barras horizontais empilhadas podem ser configuradas para comparação de volume absoluto ou normalizadas para mostrar razões percentuais entre categorias.
1. Gráfico de Barras Horizontais Normalizadas em 100%
Para avaliar razões relativas em vez de contagens absolutas em categorias longas, normalize seus dados de série para somar 100% por linha:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Satisfeito', 'Neutro', 'Insatisfeito']
},
xAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
yAxis: {
type: 'category',
data: [
'Sucesso do Cliente Empresarial',
'Serviços de Suporte para Mercado Intermediário',
'Onboarding Autoatendimento'
]
},
series: [
{
name: 'Satisfeito',
type: 'bar',
stack: 'feedback',
data: [75, 60, 45]
},
{
name: 'Neutro',
type: 'bar',
stack: 'feedback',
data: [18, 25, 35]
},
{
name: 'Insatisfeito',
type: 'bar',
stack: 'feedback',
data: [7, 15, 20]
}
]
};
Afinamento de Layout e Estilo
Contornos visuais limpos e extremidades externas arredondadas dão às barras empilhadas horizontais uma aparência refinada e moderna.
1. Separação de Segmentos e Arredondamento das Extremidades Externas
Aplicar linhas finas de borda vertical para delimitar os segmentos internos e restringir o estilo de raio de canto apenas ao último segmento à direita:
option = {
grid: {
left: '15%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Orçamento Q1', 'Orçamento Q2', 'Orçamento Q3', 'Orçamento Q4']
},
series: [
{
name: 'Custos Fixos',
type: 'bar',
stack: 'budget',
data: [400, 420, 410, 430],
itemStyle: {
color: '#5470c6',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Custos Variáveis',
type: 'bar',
stack: 'budget',
data: [200, 250, 220, 280],
itemStyle: {
color: '#91cc75',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Discretionário',
type: 'bar',
stack: 'budget',
data: [100, 150, 130, 190],
itemStyle: {
color: '#fac858',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [0, 6, 6, 0] // Cantos arredondados na extremidade direita
}
}
]
};
Melhores Práticas Estratégicas
- Base do Primeiro Segmento: O segmento mais próximo da linha de base do eixo Y é o mais fácil de comparar entre categorias. Sempre coloque seu componente mais crítico como o primeiro objeto da série.
- Limite os Componentes Empilhados: Mantenha o número total de segmentos empilhados em 5 ou menos por barra para manter uma análise visual clara sem sobrecarregar o espectador.
- Rótulos de Texto Dentro da Barra: Para barras empilhadas horizontais com segmentos largos, considere habilitar
label: { show: true, position: 'inside' }para tornar os valores individuais dos segmentos legíveis sem depender de dicas ao passar o mouse.