Cuando se presentan métricas categóricas que se benefician de una asociación visual inmediata, el Gráfico de barras pictórico ofrece una alternativa creativa e interesante frente a las barras rectangulares estándar. Al reemplazar bloques de color sólido con íconos vectoriales personalizados, rutas SVG o patrones de símbolos repetidos, los gráficos de barras pictóricos transforman resúmenes de datos rutinarios en infografías visualmente descriptivas—como íconos humanos para estadísticas de población, formas de vehículos para métricas de tráfico o símbolos de frutas para conteos de cosecha.
La mecánica de los gráficos de barras pictóricos
En Apache ECharts, los gráficos de barras pictóricos utilizan type: 'pictorialBar'. Funcionan en ejes de categoría y valor estándar, al igual que los gráficos de barras regulares, pero reemplazan las barras rectangulares con gráficos personalizables definidos por la propiedad symbol (como formas estándar, URLs de imágenes o cadenas de rutas SVG).
1. Configuración esencial
Para construir un gráfico de barras pictórico de múltiples series, configure ejes categóricos y numéricos, defina type: 'pictorialBar' en todas las series y personalice los símbolos individuales directamente dentro del array data array:
option = {
title: {
text: "Cosecha del Mercado de Agricultores",
left: 'center'
},
legend: {
data: ['Primavera', 'Verano'],
top: '8%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
containLabel: true,
top: '18%',
left: 20
},
yAxis: {
data: ['Manzanas', 'Naranjas', 'Plátanos', 'Uvas', 'Fresas'],
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: 'Verano',
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 estructurales avanzadas
Los gráficos de barras pictóricos pueden repetir íconos secuencialmente para crear conteos de infografías basadas en unidades o utilizar rutas de recorte para crear visualizaciones de nivel de relleno.
1. Patrones de conteo de unidades en series únicas
Habilite symbolRepeat: trueen un eje de valor único para renderizar pilas horizontales de símbolos basados en unidades:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'value',
max: 10,
splitLine: { show: false }
},
yAxis: {
type: 'category',
data: ['Equipo Alfa', 'Equipo Beta', 'Equipo Gama'],
axisLine: { show: false },
axisTick: { show: false }
},
series: [
{
type: 'pictorialBar',
symbol: 'rectánguloRedondeado',
symbolRepeat: true,
symbolSize: [12, 30],
symbolMargin: 4,
data: [8, 5, 9],
itemStyle: {
color: '#91cc75'
}
}
]
};
Ajuste fino del diseño y formas SVG personalizadas
Usar cadenas de ruta SVG vectoriales personalizadas te permite renderizar íconos adaptados directamente dentro de tus series de gráficos.
1. Ruta vectorial personalizada y superposición de fondo
Proporciona una cadena de ruta SVG personalizada a símboloy superpone una gráfica de fondo a escala completa debajo para crear medidores de estilo progreso:
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: 'Niveles de batería de dispositivos',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'none' }
},
grid: {
top: '20%',
bottom: '15%',
left: '10%',
right: '10%'
},
xAxis: {
type: 'category',
data: ['Nodo A', 'Nodo B', 'Nodo C', 'Nodo D'],
axisLine: { show: false },
axisTick: { show: false }
},
yAxis: {
type: 'value',
max: 100,
show: false
},
series: [
{
name: 'Carcasa de batería',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: false,
itemStyle: {
color: '#e2e8f0' // Carcasa de fondo vacía
},
data: [100, 100, 100, 100],
z: 1
},
{
name: 'Nivel de carga',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: true, // Rellena proporcionalmente según el valor
label: {
show: true,
position: 'top',
formatter: '{c}%',
fontSize: 14,
fontWeight: 'bold',
color: '#333'
},
itemStyle: {
color: '#22c55e' // Relleno verde de carga activa
},
data: [85, 45, 92, 20],
z: 2
}
]
};
Prácticas recomendadas estratégicas
- Asigna símbolos por elemento para categorías distintas:Pasa definiciones individuales de
símbolodefiniciones dentro de objetos de datos (por ejemplo,{ value: 320, symbol: 'círculo' }) para distinguir visualmente filas sin depender únicamente de los colores. - Mantén las metáforas de íconos intuitivas:Elige símbolos que coincidan directamente con el tema de los datos (por ejemplo, siluetas de usuarios para datos demográficos o íconos de batería para métricas de energía) para que la visualización sea inmediatamente comprensible.
- Usa
symbolClip: truepara indicadores de relleno:Cuando muestres métricas porcentuales contra fondos completos, establecesymbolClip: trueen la serie activa para que la forma vectorial personalizada se rellene proporcionalmente.