Ketika menyajikan metrik kategorikal yang mendapat manfaat dari asosiasi visual langsung, makaDiagram Batang Ilustratifmenawarkan alternatif yang kreatif dan menarik dibandingkan batang persegi panjang standar. Dengan mengganti blok warna padat dengan ikon vektor kustom, jalur SVG, atau pola simbol berulang, diagram batang ilustratif mengubah ringkasan data rutin menjadiinfografis yang deskriptif secara visual—seperti ikon manusia untuk statistik populasi, bentuk kendaraan untuk metrik lalu lintas, atau simbol buah untuk jumlah panen.
Mekanisme Diagram Batang Ilustratif
Dalam Apache ECharts, diagram batang ilustratif menggunakantype: 'pictorialBar'. Mereka beroperasi pada sumbu kategori dan nilai standar seperti diagram batang biasa, tetapi mengganti batang persegi panjang dengan grafik yang dapat disesuaikan yang ditentukan oleh propertisymbol (seperti bentuk standar, URL gambar, atau string jalur SVG).
1. Pengaturan Dasar
Untuk membuat diagram batang ilustratif multi-seri, siapkan sumbu kategorikal dan numerik, tentukantype: 'pictorialBar' di seluruh seri, dan sesuaikan simbol titik individu langsung dalam arraydata array:
option = {
title: {
text: "Panen Pasar Petani",
left: 'center'
},
legend: {
data: ['Musim Semi', 'Musim Panas'],
top: '8%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
containLabel: true,
top: '18%',
left: 20
},
yAxis: {
data: ['Apel', 'Jeruk', 'Pisang', 'Anggur', 'Stroberi'],
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: 'Musim Semi',
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: 'Musim Panas',
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' }
]
}
]
};
Teknik Struktural Lanjutan
Diagram batang ilustratif dapat mengulang ikon secara berurutan untuk membangun jumlah infografis berbasis unit atau menggunakan jalur pemotong untuk menciptakan visualisasi tingkat isi.
1. Pola Jumlah Unit Seri Tunggal
AktifkansymbolRepeat: truepada sumbu nilai tunggal untuk menampilkan tumpukan simbol berbasis unit secara horizontal:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'value',
max: 10,
splitLine: { show: false }
},
yAxis: {
type: 'category',
data: ['Tim Alpha', 'Tim Beta', 'Tim 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'
}
}
]
};
Penyesuaian Layout dan Bentuk SVG Kustom
Menggunakan string jalur SVG vektor kustom memungkinkan Anda menampilkan ikon yang disesuaikan langsung di dalam seri grafik Anda.
1. Jalur Vektor Kustom dan Overlay Latar Belakang
Sediakan string jalur SVG kustom ke simboldan tambahkan grafik latar belakang skala penuh di bawahnya untuk membuat meter gaya kemajuan:
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: 'Tingkat Baterai Perangkat',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'none' }
},
grid: {
top: '20%',
bottom: '15%',
left: '10%',
right: '10%'
},
xAxis: {
type: 'category',
data: ['Node A', 'Node B', 'Node C', 'Node D'],
axisLine: { show: false },
axisTick: { show: false }
},
yAxis: {
type: 'value',
max: 100,
show: false
},
series: [
{
name: 'Cangkang Baterai',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: false,
itemStyle: {
color: '#e2e8f0' // Cangkang latar belakang kosong
},
data: [100, 100, 100, 100],
z: 1
},
{
name: 'Tingkat Isi',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: true, // Mengisi secara proporsional terhadap nilai
label: {
show: true,
position: 'top',
formatter: '{c}%',
fontSize: 14,
fontWeight: 'bold',
color: '#333'
},
itemStyle: {
color: '#22c55e' // Isi hijau aktif
},
data: [85, 45, 92, 20],
z: 2
}
]
};
Praktik Terbaik Strategis
- Tetapkan Simbol Per-Item untuk Kategori yang Berbeda:Berikan definisi individual
simboldefinisi di dalam objek data (misalnya,{ value: 320, symbol: 'lingkaran' }) untuk membedakan baris secara visual tanpa mengandalkan warna semata. - Jaga Metafora Ikon agar Intuitif:Pilih simbol yang secara langsung sesuai dengan topik data (misalnya, siluet pengguna untuk data demografis atau ikon baterai untuk metrik daya) agar visual dapat dibaca secara langsung.
- Gunakan
symbolClip: trueuntuk Indikator Isi:Ketika menampilkan metrik persentase terhadap latar belakang penuh, atursymbolClip: truepada seri aktif agar bentuk vektor kustom terisi secara proporsional.