Khi trình bày các tập dữ liệu phân cấp nhiều cấp độ hoặc hiển thị các phân tích trực quan lớn nơi không gian là yếu tố quý giá, thìBiểu đồ Treemap cung cấp một giải pháp trực quan hiệu quả. Bằng cách ghép các hình chữ nhật lồng ghép vào một khu vực giới hạn duy nhất, biểu đồ Treemap mã hóa các giá trị số học thông qua kích thước diện tích hình chữ nhật, cho phép người dùng đánh giátỷ lệ tương đối qua các cấu trúc phân cấp phức tạp—ví dụ như sử dụng dung lượng đĩa, doanh thu danh mục sản phẩm, hoặc phân bổ ngân sách giữa các phòng ban cha và con.
Cơ chế của biểu đồ Treemap
Trong Apache ECharts, biểu đồ Treemap sử dụngtype: 'treemap'. Chuỗi dữ liệu mong đợi một mảng cấu trúc cây nơi mỗi đối tượng chứa mộtdữ liệumảng nơi mỗi đối tượng chứa mộttên, mộtgiá trị định lượng, và một mảng tùy chọnconcho các cấp độ phân cấp sâu hơn.
1. Cài đặt cơ bản
Để xây dựng một biểu đồ Treemap cơ bản, xác định một mảng dữ liệu phân cấp với cácconvà thiết lậptype: 'treemap'trong cấu hình chuỗi của bạn:
option = {
tooltip: {
formatter: '{b}: ${c}'
},
series: [
{
type: 'treemap',
data: [
{
name: 'Điện tử',
value: 400,
children: [
{ name: 'Điện thoại', value: 240 },
{ name: 'Máy tính xách tay', value: 160 }
]
},
{
name: 'Thời trang',
value: 300,
children: [
{ name: 'Áo sơ mi', value: 180 },
{ name: 'Giày dép', value: 120 }
]
}
]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ Treemap có thể được cấu hình với các quy tắc định dạng đa cấp, ánh xạ dải màu và các điều khiển thao tác tương tác để duyệt sâu vào các cây dữ liệu phức tạp.
1. Thao tác điều hướng breadcrumb nhiều cấp
Bật chú giải ở đầu và điều hướng breadcrumb để người dùng có thể xác định các danh mục cấp cao nhất và điều hướng trơn tru vào các thư mục con lồng ghép:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} GB'
},
legend: {
top: '5%',
left: 'center',
data: ['Ổ hệ thống (C:)', 'Ổ dữ liệu (D:)']
},
series: [
{
type: 'treemap',
top: '18%',
bottom: '12%',
leafDepth: 1, // Hiển thị một cấp tại một thời điểm với thao tác nhấp để điều hướng sâu
breadcrumb: {
show: true,
left: 'center',
bottom: '2%'
},
levels: [
{
itemStyle: {
borderColor: '#555',
borderWidth: 2,
gapWidth: 2
}
},
{
colorSaturation: [0.3, 0.6],
itemStyle: {
borderWidth: 1,
gapWidth: 1,
borderColorSaturation: 0.7
}
}
],
data: [
{
name: 'Ổ hệ thống (C:)',
value: 500,
children: [
{ name: 'Windows', value: 120 },
{ name: 'Tệp chương trình', value: 230 },
{ name: 'Người dùng', value: 150 }
]
},
{
name: 'Ổ dữ liệu (D:)',
value: 800,
children: [
{ name: 'Media', value: 450 },
{ name: 'Sao lưu', value: 250 },
{ name: 'Dự án', value: 100 }
]
}
]
}
]
};
Tinh chỉnh bố cục và định dạng
Áp dụng độ rộng khoảng cách, viền sạch sẽ và màu sắc cấp độ khác nhau giúp các hình chữ nhật lồng ghép được sắp xếp gọn gàng và dễ đọc về mặt thị giác.
1. Viền ô tùy chỉnh và căn chỉnh nhãn
Điều chỉnh gapWidth và labelcấu hình để duy trì các ranh giới rõ ràng giữa các container cha và các đoạn con:
option = {
series: [
{
type: 'treemap',
roam: false, // Tắt thao tác phóng to/thu nhỏ hoặc di chuyển thủ công
label: {
show: true,
formatter: '{b}n{c}'
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
gapWidth: 2
},
data: [
{
name: 'Bắc Mỹ',
value: 520,
itemStyle: { color: '#5470c6' }
},
{
name: 'Châu Âu',
value: 380,
itemStyle: { color: '#91cc75' }
},
{
name: 'Châu Á Thái Bình Dương',
value: 450,
itemStyle: { color: '#fac858' }
},
{
name: 'Châu Mỹ Latinh',
value: 190,
itemStyle: { color: '#ee6666' }
}
]
}
]
};
Các thực hành tốt chiến lược
- Sử dụng
gapWidthđể tăng độ hiển thị cho cấu trúc lồng ghép:Thêm một khoảng cách nhỏgapWidth(ví dụ: 2px đến 4px) giữa các hình chữ nhật lồng ghép sẽ tạo khoảng cách rõ ràng giữa các danh mục cha và các mục con. - Bật breadcrumb cho các cấu trúc phân cấp sâu: Khi hiển thị 3 cấp hoặc nhiều hơn, hãy bật `breadcrumb: { show: true }` để người dùng có thể dễ dàng theo dõi vị trí hiện tại và điều hướng quay lại cấp cao hơn.
- Giữ nhãn ngắn gọn: Văn bản có thể dễ dàng tràn ra ngoài các hình chữ nhật lá nhỏ. Kết hợp tên ngắn gọn với công cụ gợi ý hoặc sử dụng
leafDepthđể ẩn các hình chữ nhật con nhỏ cho đến khi phóng to.