Wenn kategoriale Metriken präsentiert werden, die von einer sofortigen visuellen Assoziation profitieren, bietet das Bildliches Säulendiagrammbietet eine kreative und ansprechende Alternative zu standardmäßigen rechteckigen Säulen. Indem festen Farbflächen benutzerdefinierte Vektor-Symbole, SVG-Pfade oder wiederholte Symbolmuster ersetzt werden, verwandeln bildliche Säulendiagramme alltägliche Datenzusammenfassungen in visuell beschreibende Infografiken—beispielsweise Menschen-Symbole für Bevölkerungsstatistiken, Fahrzeugformen für Verkehrsdaten oder Frucht-Symbole für Erntezahlen.
Die Funktionsweise von bildlichen Säulendiagrammen
In Apache ECharts verwenden bildliche Säulendiagramme type: 'pictorialBar'. Sie arbeiten mit standardmäßigen Kategorien- und Wertachsen wie gewöhnliche Säulendiagramme, ersetzen jedoch rechteckige Säulen durch anpassbare Grafiken, die durch die Eigenschaft symbol definiert werden (beispielsweise Standardformen, Bild-URLs oder SVG-Pfadzeichenfolgen).
1. Grundlegende Einrichtung
Um ein mehrreihiges bildliches Säulendiagramm zu erstellen, richten Sie kategoriale und numerische Achsen ein, definieren Sie type: 'pictorialBar' über mehrere Reihen hinweg und passen Sie individuelle Punkt-Symbole direkt innerhalb des dataArrays an.
option = {
title: {
text: "Ernte auf dem Bauernmarkt",
left: 'center'
},
legend: {
data: ['Frühling', 'Sommer'],
top: '8%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
containLabel: true,
top: '18%',
left: 20
},
yAxis: {
data: ['Äpfel', 'Orangen', 'Bananen', 'Trauben', 'Erdbeeren'],
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: 'Frühling',
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: 'Sommer',
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' }
]
}
]
};
Fortgeschrittene strukturelle Techniken
Bildliche Säulendiagramme können Symbole sequenziell wiederholen, um basierte Infografikzahlen zu erstellen, oder Clipping-Pfade verwenden, um Füllungsvisualisierungen zu erzeugen.
1. Einzelreihige Muster für Einheitszählungen
Aktivieren Sie symbolRepeat: trueauf einer einzelnen Wertachse, um horizontale, auf Einheiten basierende Symbolstapel darzustellen:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'value',
max: 10,
splitLine: { show: false }
},
yAxis: {
type: 'category',
data: ['Team Alpha', 'Team Beta', 'Team Gamma'],
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'
}
}
]
};
Feinabstimmung von Layout und benutzerdefinierten SVG-Formen
Durch die Verwendung benutzerdefinierter Vektor-SVG-Pfadzeichenketten können Sie maßgeschneiderte Symbole direkt innerhalb Ihrer Diagrammreihen darstellen.
1. Benutzerdefinierter Vektorpfad und Hintergrundüberlagerung
Geben Sie eine benutzerdefinierte SVG-Pfadzeichenkette an für symbol und legen Sie ein grafisches Hintergrundbild im vollen Maßstab darunter, um Fortschrittsmesser im Stil zu erstellen:
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: 'Geräte-Akku-Stand',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'none' }
},
grid: {
top: '20%',
bottom: '15%',
left: '10%',
right: '10%'
},
xAxis: {
type: 'category',
data: ['Knoten A', 'Knoten B', 'Knoten C', 'Knoten D'],
axisLine: { show: false },
axisTick: { show: false }
},
yAxis: {
type: 'value',
max: 100,
show: false
},
series: [
{
name: 'Akku-Gehäuse',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: false,
itemStyle: {
color: '#e2e8f0' // Leeres Hintergrundgehäuse
},
data: [100, 100, 100, 100],
z: 1
},
{
name: 'Ladezustand',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: true, // Füllt proportional zum Wert
label: {
show: true,
position: 'top',
formatter: '{c}%',
fontSize: 14,
fontWeight: 'bold',
color: '#333'
},
itemStyle: {
color: '#22c55e' // Aktiver Ladezustand grün gefüllt
},
data: [85, 45, 92, 20],
z: 2
}
]
};
Strategische Best Practices
- Weisen Sie pro-Element-Symbole für unterschiedliche Kategorien zu:Übergeben Sie individuelle
symbolDefinitionen innerhalb von Datenobjekten (z. B.{ value: 320, symbol: 'kreis' }) um Zeilen visuell zu unterscheiden, ohne sich ausschließlich auf Farben zu verlassen. - Halten Sie Symbolmetaphern intuitiv:Wählen Sie Symbole, die direkt dem Daten-Thema entsprechen (z. B. Benutzer-Silhouetten für demografische Daten oder Akku-Symbole für Leistungsmetriken), damit die Visualisierung sofort verständlich ist.
- Verwenden Sie
symbolClip: truefür Füllindikatoren: Wenn Prozentangaben gegenüber vollständigen Hintergründen angezeigt werden, setzen SiesymbolClip: trueauf der aktiven Reihe, damit die benutzerdefinierte Vektorform proportional gefüllt wird.