Khi trình bày dữ liệu có cấu trúc với các mối quan hệ cha-con rõ ràng—ví dụ như sơ đồ tổ chức, thư mục hệ thống tệp, cây quyết định hoặc phân loại phân loại học—thìBiểu đồ Cây cung cấp một khung hình ảnh trực quan. Bằng cách sắp xếp các nút dữ liệu dọc theo các nhánh phân nhánh, biểu đồ cây cho phép người dùng khám phá các cấu trúc phân cấp lồng nhau và theo dõi các kết nối từ một nút gốc trung tâm xuống các nhánh con.
Cơ chế của Biểu đồ Cây
Trong Apache ECharts, biểu đồ cây sử dụngtype: 'tree'. Khác với các biểu đồ tiêu chuẩn có trục X và Y rõ ràng, biểu đồ cây xây dựng vị trí bố cục tự động từ một đối tượng JavaScript lồng ghép chứa mộtname và một mảng tùy chọnchildren mảng.
1. Thiết lập cơ bản
Để xây dựng một biểu đồ cây cơ bản, hãy xác định cấu trúc dữ liệu lồng ghép của bạn và đặttype: 'tree'bên trong mảng series:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [{
name: 'Giám đốc điều hành',
children: [
{
name: 'Giám đốc sản phẩm',
children: [
{ name: 'Quản lý sản phẩm' },
{ name: 'Thiết kế UX' }
]
},
{
name: 'Giám đốc kỹ thuật',
children: [
{ name: 'Trưởng nhóm công nghệ' },
{ name: 'Kỹ sư DevOps' }
]
}
]
}],
top: '5%',
left: '15%',
bottom: '5%',
right: '20%',
symbolSize: 10,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 12
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
expandAndCollapse: true,
animationDurationUpdate: 750
}
]
};
Các định hướng bố cục nâng cao
Biểu đồ cây có thể thích nghi với các giới hạn không gian khác nhau và yêu cầu thiết kế bằng cách thay đổi hướng bố cục hoặc chuyển sang hiển thị hình tròn.
1. Bố cục cây hình tròn
Đặtlayout: 'radial'để chiếu các nhánh ra ngoài từ một điểm trung tâm, lý tưởng cho các cấu trúc phân cấp rộng với nhiều nút lá:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
layout: 'radial',
data: [{
name: 'Gốc',
children: [
{
name: 'Nhánh A',
children: [
{ name: 'A1' },
{ name: 'A2' },
{ name: 'A3' }
]
},
{
name: 'Nhánh B',
children: [
{ name: 'B1' },
{ name: 'B2' }
]
},
{
name: 'Nhánh C',
children: [
{ name: 'C1' },
{ name: 'C2' },
{ name: 'C3' },
{ name: 'C4' }
]
}
]
}],
top: '18%',
bottom: '14%',
right: '18%',
left: '18%',
symbolSize: 12,
initialTreeDepth: 2,
animationDurationUpdate: 750
}
]
};
Tinh chỉnh bố cục và định dạng
Tùy chỉnh biểu tượng nút, đường cong đường nối và định dạng theo cấp độ giúp làm nổi bật các tầng cấu trúc chính trong các sơ đồ lớn.
1. Kết nối cong và định dạng nút theo cấp độ
Sử dụng lineStyle.curveness để làm trơn các đường nối, và xác định levelscấu hình mảng để định dạng các nút theo độ sâu của chúng trong cấu trúc phân cấp:
option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'tree',
orient: 'TB', // Hướng từ trên xuống dưới
data: [{
name: 'Gốc Dự án',
children: [
{
name: 'Frontend',
children: [
{ name: 'React' },
{ name: 'Vue' }
]
},
{
name: 'Backend',
children: [
{ name: 'Node.js' },
{ name: 'Python' }
]
}
]
}],
top: '10%',
left: '10%',
bottom: '10%',
right: '10%',
symbol: 'emptyCircle',
symbolSize: 14,
edgeShape: 'polyline', // Sử dụng kết nối hình chữ nhật sắc nét thay vì đường cong
initialTreeDepth: 2,
lineStyle: {
width: 2,
color: '#ccc'
},
label: {
position: 'top',
fontSize: 12
},
leaves: {
label: {
position: 'bottom'
}
}
}
]
};
Các thực hành tốt chiến lược
- Kiểm soát độ sâu thu gọn ban đầu: Đặt
initialTreeDepth(ví dụ:1hoặc2) trên dữ liệu lớn để giữ cho biểu đồ sạch sẽ khi tải ban đầu, đồng thời cho phép người dùng nhấp vào các nút để mở rộng chi tiết. - Chọn định hướng phù hợp:Sử dụng bố cục ngang (`LR`) hoặc bố cục hình tròn (`radial`) cho các cấu trúc lồng ghép sâu với văn bản nhãn dài, và bố cục dọc (`TB`) cho các cấu trúc tổ chức nông, rộng.
- Phân biệt các nút lá: Sử dụng thuộc tính
leavesđể định dạng các nút cuối khác biệt với các nút cha chứa, giúp người dùng dễ dàng phân biệt nhánh với điểm kết thúc.