Khi trình bày các chỉ số phân loại có lợi từ sự liên kết trực quan ngay lập tức, thìBiểu đồ cột hình ảnh mang đến một lựa chọn sáng tạo và hấp dẫn thay thế cho các thanh hình chữ nhật tiêu chuẩn. Bằng cách thay thế các khối màu đầy bằng biểu tượng vector tùy chỉnh, các đường dẫn SVG hoặc các mẫu biểu tượng lặp lại, biểu đồ cột hình ảnh biến các bản tóm tắt dữ liệu thông thường thànhcác infographic mô tả trực quan—ví dụ như biểu tượng con người cho thống kê dân số, hình dạng phương tiện cho các chỉ số giao thông, hoặc biểu tượng trái cây cho số lượng thu hoạch.
Cơ chế của biểu đồ cột hình ảnh
Trong Apache ECharts, biểu đồ cột hình ảnh sử dụngtype: 'pictorialBar'. Chúng hoạt động trên trục danh mục và trục giá trị tiêu chuẩn giống như biểu đồ cột thông thường, nhưng thay thế các thanh hình chữ nhật bằng các đồ họa tùy chỉnh được xác định bởi thuộc tínhsymbol (ví dụ như các hình dạng tiêu chuẩn, URL hình ảnh hoặc chuỗi đường dẫn SVG).
1. Cài đặt cơ bản
Để xây dựng biểu đồ cột hình ảnh đa chuỗi, hãy thiết lập trục danh mục và trục số, xác địnhtype: 'pictorialBar'trên các chuỗi, và tùy chỉnh các biểu tượng điểm riêng lẻ trực tiếp trong mảngdatamảng:
option = {
title: {
text: "Thu hoạch tại chợ nông dân",
left: 'center'
},
legend: {
data: ['Mùa xuân', 'Mùa hè'],
top: '8%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
containLabel: true,
top: '18%',
left: 20
},
yAxis: {
data: ['Táo', 'Cam', 'Chuối', 'Nho', 'Dâu tây'],
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: 'Mùa xuân',
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: 'Mùa hè',
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' }
]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ cột hình ảnh có thể lặp lại biểu tượng theo thứ tự để xây dựng các đếm infographic dựa trên đơn vị, hoặc sử dụng các đường cắt để tạo ra các biểu đồ trực quan theo mức độ lấp đầy.
1. Mẫu đếm đơn vị chuỗi đơn
Kích hoạtsymbolRepeat: truetrên một trục giá trị đơn để hiển thị các chồng biểu tượng theo đơn vị ngang:
option = {
tooltip: {
trigger: 'trục'
},
trụcX: {
loại: 'giá trị',
max: 10,
đường chia: { hiển thị: false }
},
trụcY: {
loại: 'thể loại',
dữ liệu: ['Đội Alpha', 'Đội Beta', 'Đội Gamma'],
đường trục: { hiển thị: false },
dấu chia: { hiển thị: false }
},
chuỗi: [
{
loại: 'cột biểu tượng',
biểu tượng: 'hình chữ nhật tròn',
lặp biểu tượng: true,
kích thước biểu tượng: [12, 30],
khoảng cách biểu tượng: 4,
dữ liệu: [8, 5, 9],
kiểu mục: {
màu: '#91cc75'
}
}
]
};
Tinh chỉnh bố cục và hình dạng SVG tùy chỉnh
Sử dụng chuỗi đường dẫn SVG vector tùy chỉnh cho phép bạn hiển thị các biểu tượng được tùy chỉnh trực tiếp bên trong chuỗi biểu đồ của bạn.
1. Đường dẫn vector tùy chỉnh và lớp chồng nền
Cung cấp một chuỗi đường dẫn SVG tùy chỉnh cho biểu tượng và đặt một đồ họa nền đầy đủ ở phía dưới để xây dựng đồng hồ tiến độ:
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 = {
tiêu đề: {
text: 'Mức pin thiết bị',
left: 'center'
},
công cụ gợi ý: {
trigger: 'trục',
trỏ trục: { loại: 'không' }
},
lưới: {
top: '20%',
bottom: '15%',
left: '10%',
right: '10%'
},
trụcX: {
loại: 'thể loại',
dữ liệu: ['Nút A', 'Nút B', 'Nút C', 'Nút D'],
đường trục: { hiển thị: false },
dấu chia: { hiển thị: false }
},
trụcY: {
loại: 'giá trị',
max: 100,
hiển thị: false
},
chuỗi: [
{
tên: 'Vỏ pin',
loại: 'cột biểu tượng',
biểu tượng: pathBattery,
kích thước biểu tượng: ['60%', '100%'],
vị trí biểu tượng: 'bắt đầu',
dữ liệu giới hạn biểu tượng: 100,
cắt biểu tượng: false,
kiểu mục: {
màu: '#e2e8f0' // Vỏ nền trống
},
dữ liệu: [100, 100, 100, 100],
z: 1
},
{
tên: 'Mức sạc',
loại: 'cột biểu tượng',
biểu tượng: pathBattery,
kích thước biểu tượng: ['60%', '100%'],
vị trí biểu tượng: 'bắt đầu',
dữ liệu giới hạn biểu tượng: 100,
cắt biểu tượng: true, // Điền theo tỷ lệ tương ứng với giá trị
nhãn: {
hiển thị: true,
vị trí: 'trên',
định dạng: '{c}%',
cỡ chữ: 14,
độ đậm: 'đậm',
màu: '#333'
},
kiểu mục: {
màu: '#22c55e' // Màu xanh lá sạc hoạt động
},
dữ liệu: [85, 45, 92, 20],
z: 2
}
]
};
Các thực hành tốt chiến lược
- Gán biểu tượng cho từng mục để phân biệt các thể loại khác nhau: Truyền từng
biểu tượngđịnh nghĩa bên trong các đối tượng dữ liệu (ví dụ như{ value: 320, symbol: 'circle' }) để phân biệt các hàng về mặt thị giác mà không phụ thuộc hoàn toàn vào màu sắc. - Giữ các ẩn dụ biểu tượng trực quan:Chọn các biểu tượng phù hợp trực tiếp với chủ đề dữ liệu (ví dụ: hình bóng người cho dữ liệu dân số hoặc biểu tượng pin cho dữ liệu năng lượng) để hình ảnh có thể được đọc ngay lập tức.
- Sử dụng
symbolClip: trueđể chỉ báo điền đầy:Khi hiển thị các chỉ số phần trăm so với nền đầy đủ, hãy đặtsymbolClip: truetrên chuỗi hoạt động để hình dạng vector tùy chỉnh điền đầy theo tỷ lệ.