Podczas prezentowania metryk kategorycznych, które korzystają z natychmiastowej asocjacji wizualnej, Wykres słupkowy ilustracyjnyofaruje kreatywną i angażującą alternatywę dla standardowych prostokątnych słupków. Zastępując jednolite bloki kolorów niestandardowymi ikonami wektorowymi, ścieżkami SVG lub powtarzającymi się wzorami symboli, wykresy słupkowe ilustracyjne przekształcają rutynowe podsumowania danych w wizualnie opisowe infografiki—na przykład ikony ludzi dla statystyk populacji, kształty pojazdów dla metryk ruchu lub symbole owoców dla liczb zbiorów.
Zasada działania wykresów słupkowych ilustracyjnych
W Apache ECharts wykresy słupkowe ilustracyjne używają type: 'pictorialBar'. Działają na standardowych osiach kategorii i wartości tak samo jak zwykłe wykresy słupkowe, ale zastępują prostokątne słupki dostosowanymi grafikami zdefiniowanymi przez właściwość symbol (na przykład standardowe kształty, adresy URL obrazów lub ciągi ścieżek SVG).
1. Podstawowa konfiguracja
Aby stworzyć wykres słupkowy ilustracyjny z wieloma seriami, skonfiguruj osie kategoryczne i liczbowe, zdefiniuj type: 'pictorialBar' na wszystkich serii oraz dostosuj indywidualne symbole punktów bezpośrednio wewnątrz tablicy datatablicy:
option = {
title: {
text: "Urodzaj na rynku rolnika",
left: 'center'
},
legend: {
data: ['Wiosna', 'Lato'],
top: '8%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
containLabel: true,
top: '18%',
left: 20
},
yAxis: {
data: ['Jabłka', 'Pomarańcze', 'Banany', 'Winogrona', 'Truskawki'],
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: 'Wiosna',
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: 'Lato',
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' }
]
}
]
};
Zaawansowane techniki strukturalne
Wykresy słupkowe ilustracyjne mogą powtarzać ikony sekwencyjnie, aby tworzyć podsumowania infografik oparte na jednostkach, albo używać ścieżek przycinania do tworzenia wizualizacji poziomu wypełnienia.
1. Wzory liczb jednostkowych dla pojedynczych serii
Włącz symbolRepeat: truena jednej osi wartości, aby renderować poziome stosy symboli opartych na jednostkach:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'value',
max: 10,
splitLine: { show: false }
},
yAxis: {
type: 'category',
data: ['Zespół Alpha', 'Zespół Beta', 'Zespół 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'
}
}
]
};
Dokładna dostosowanie układu i niestandardowych kształtów SVG
Używanie niestandardowych ciągów ścieżek wektorowych SVG pozwala renderować dopasowane ikony bezpośrednio w serii wykresu.
1. Niestandardowa ścieżka wektorowa i nakładanie tła
Podaj niestandardowy ciąg ścieżki SVG do symboli nałożenie grafiki tła w pełnym rozmiarze poniżej, aby stworzyć mierniki typu postęp:
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: 'Poziom naładowania urządzeń',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'none' }
},
grid: {
top: '20%',
bottom: '15%',
left: '10%',
right: '10%'
},
xAxis: {
type: 'category',
data: ['Węzeł A', 'Węzeł B', 'Węzeł C', 'Węzeł D'],
axisLine: { show: false },
axisTick: { show: false }
},
yAxis: {
type: 'value',
max: 100,
show: false
},
series: [
{
name: 'Obudowa baterii',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: false,
itemStyle: {
color: '#e2e8f0' // Puste tło obudowy
},
data: [100, 100, 100, 100],
z: 1
},
{
name: 'Poziom naładowania',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: true, // Wypełnia proporcjonalnie względem wartości
label: {
show: true,
position: 'top',
formatter: '{c}%',
fontSize: 14,
fontWeight: 'bold',
color: '#333'
},
itemStyle: {
color: '#22c55e' // Zielone wypełnienie aktywnego naładowania
},
data: [85, 45, 92, 20],
z: 2
}
]
};
Strategiczne najlepsze praktyki
- Przypisz symbole dla poszczególnych elementów dla różnych kategorii: Przekaż indywidualne
symboldefinicje w obiektach danych (np.{ value: 320, symbol: 'circle' }) aby wizualnie odróżnić wiersze, nie polegając wyłącznie na kolorach. - Zachowaj intuicyjne metafory ikon: Wybierz symbole, które bezpośrednio odpowiadają tematowi danych (np. kontury użytkowników dla danych demograficznych lub ikony baterii dla metryk energii), aby wizualizacja była od razu czytelna.
- Użyj
symbolClip: truedo wskazników wypełnienia: Gdy pokazujesz metryki procentowe w stosunku do pełnego tła, ustawsymbolClip: truew aktywnej serii, aby niestandardowy kształt wektorowy wypełniał się proporcjonalnie.