Ao apresentar métricas categóricas que se beneficiam de associações visuais imediatas, o Gráfico de Barras Pictóricooferece uma alternativa criativa e envolvente em comparação com barras retangulares padrão. Ao substituir blocos de cor sólida por ícones vetoriais personalizados, caminhos SVG ou padrões de símbolos repetidos, os gráficos de barras pictóricos transformam resumos de dados rotineiros em infográficos visualmente descritivos—como ícones humanos para estatísticas populacionais, formas de veículos para métricas de tráfego ou símbolos de frutas para contagens de colheita.
Os Mecanismos dos Gráficos de Barras Pictóricos
No Apache ECharts, os gráficos de barras pictóricos usam type: 'pictorialBar'. Eles operam em eixos padrão de categoria e valor, assim como os gráficos de barras regulares, mas substituem barras retangulares por gráficos personalizáveis definidos pela propriedade symbol (como formas padrão, URLs de imagens ou strings de caminhos SVG).
1. Configuração Básica
Para construir um gráfico de barras pictórico multi-série, configure eixos categóricos e numéricos, defina type: 'pictorialBar'em todas as séries e personalize símbolos individuais diretamente na matriz data array:
option = {
title: {
text: "Colheita do Mercado de Agricultores",
left: 'center'
},
legend: {
data: ['Primavera', 'Verão'],
top: '8%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
containLabel: true,
top: '18%',
left: 20
},
yAxis: {
data: ['Maçãs', 'Laranjas', 'Bananas', 'Uvas', 'Morangos'],
inverse: true,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
margin: 30,
fontSize: 14
}
},
xAxis: {
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
axisLine: { show: false }
},
series: [
{
name: 'Primavera',
type: 'pictorialBar',
symbolRepeat: true,
symbolSize: ['80%', '60%'],
barCategoryGap: '40%',
data: [
{ value: 320, symbol: 'circle' },
{ value: 180, symbol: 'rect' },
{ value: 410, symbol: 'diamond' },
{ value: 95, symbol: 'triangle' },
{ value: 240, symbol: 'roundRect' }
]
},
{
name: 'Verão',
type: 'pictorialBar',
barGap: '10%',
symbolRepeat: true,
symbolSize: ['80%', '60%'],
data: [
{ value: 290, symbol: 'circle' },
{ value: 210, symbol: 'rect' },
{ value: 520, symbol: 'diamond' },
{ value: 130, symbol: 'triangle' },
{ value: 310, symbol: 'roundRect' }
]
}
]
};
Técnicas Estruturais Avançadas
Os gráficos de barras pictóricos podem repetir ícones sequencialmente para criar contagens de infográficos baseadas em unidades ou usar caminhos de recorte para criar visualizações de nível de preenchimento.
1. Padrões de Contagem de Unidades em Série Única
Habilite symbolRepeat: trueem um único eixo de valor para renderizar pilhas horizontais de símbolos baseados em unidades:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'value',
max: 10,
splitLine: { show: false }
},
yAxis: {
type: 'category',
data: ['Equipe Alpha', 'Equipe Beta', 'Equipe Gama'],
axisLine: { show: false },
axisTick: { show: false }
},
series: [
{
type: 'pictorialBar',
symbol: 'roundRect',
symbolRepeat: true,
symbolSize: [12, 30],
symbolMargin: 4,
data: [8, 5, 9],
itemStyle: {
color: '#91cc75'
}
}
]
};
Afinando Layout e Formas SVG Personalizadas
Usar strings personalizadas de caminho SVG vetorial permite que você renderize ícones personalizados diretamente dentro de suas séries de gráficos.
1. Caminho Vetorial Personalizado e Superposição de Fundo
Forneça uma string personalizada de caminho SVG para símbolo e sobreponha uma imagem de fundo em escala total abaixo para criar medidores do tipo progresso:
const pathBattery = 'path://M16 4h-2V2a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z';
option = {
title: {
text: 'Níveis de Bateria dos Dispositivos',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'none' }
},
grid: {
top: '20%',
bottom: '15%',
left: '10%',
right: '10%'
},
xAxis: {
type: 'category',
data: ['Nó A', 'Nó B', 'Nó C', 'Nó D'],
axisLine: { show: false },
axisTick: { show: false }
},
yAxis: {
type: 'value',
max: 100,
show: false
},
series: [
{
name: 'Invólucro da Bateria',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: false,
itemStyle: {
color: '#e2e8f0' // Invólucro de fundo vazio
},
data: [100, 100, 100, 100],
z: 1
},
{
name: 'Nível de Carga',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: true, // Preenche proporcionalmente em relação ao valor
label: {
show: true,
position: 'top',
formatter: '{c}%',
fontSize: 14,
fontWeight: 'bold',
color: '#333'
},
itemStyle: {
color: '#22c55e' // Preenchimento verde ativo de carga
},
data: [85, 45, 92, 20],
z: 2
}
]
};
Melhores Práticas Estratégicas
- Atribua símbolos por item para categorias distintas: Passe definições individuais de
símbolodentro dos objetos de dados (por exemplo,{ valor: 320, símbolo: 'círculo' }) para distinguir visualmente as linhas sem depender exclusivamente das cores. - Mantenha os metáforas de ícones intuitivas: Escolha símbolos que correspondam diretamente ao tópico dos dados (por exemplo, silhuetas de usuários para dados demográficos ou ícones de bateria para métricas de energia) para tornar a visualização imediatamente legível.
- Use
symbolClip: truepara indicadores de preenchimento: Ao exibir métricas percentuais contra fundos completos, definasymbolClip: truena série ativa para que a forma vetorial personalizada preencha proporcionalmente.