Khi lập bản đồ các mạng lưới liên kết, các phân cấp cấu trúc hoặc các mối quan hệ thực thể phức tạp, thìBiểu đồ đồ thị (hoặc biểu đồ mạng lưới) là khung hình ảnh lý tưởng. Bằng cách hiển thị các mục dưới dạng nút và các kết nối dưới dạng liên kết có hướng hoặc vô hướng, biểu đồ đồ thị cho phép người dùng khám phácác cụm, cây phụ thuộc và luồng quan hệmà các biểu đồ bảng chuẩn không thể truyền đạt—ví dụ như kiến trúc dịch vụ vi mô, tương tác mạng xã hội hoặc đồ thị tri thức.
Cơ chế của biểu đồ đồ thị
Trong Apache ECharts, biểu đồ đồ thị sử dụngtype: 'graph'. Thay vì ánh xạ các giá trị số trực tiếp sang tọa độ trục ngang và trục dọc, biểu đồ đồ thị sử dụng một bộ sưu tập rõ ràng củanút (hoặcdata) vàlinks (hoặccạnh). Sau đó ECharts sắp xếp các nút này bằng cách đặt tọa độ cố định, bố cục hình tròn hoặc bằng một bộ động lực học lực hướng động động.
1. Cài đặt cơ bản
Để xây dựng một biểu đồ mạng cơ bản bằng vật lý hướng lực, khai báo các nút của bạn bên trongdata, ánh xạ các kết nối bên tronglinks, và đặtlayout: 'force':
option = {
tooltip: {},
legend: {
data: ['Dịch vụ', 'Cơ sở dữ liệu']
},
series: [
{
name: 'Mạng lưới Hệ thống',
type: 'graph',
layout: 'force',
roam: true, // Cho phép thu phóng và di chuyển
label: {
show: true,
position: 'right'
},
force: {
repulsion: 100,
edgeLength: 80
},
data: [
{ id: '0', name: 'Cổng API', symbolSize: 30, category: 0 },
{ id: '1', name: 'Dịch vụ Xác thực', symbolSize: 20, category: 0 },
{ id: '2', name: 'Dịch vụ Đơn hàng', symbolSize: 20, category: 0 },
{ id: '3', name: 'CSDL Người dùng', symbolSize: 25, category: 1 },
{ id: '4', name: 'CSDL Đơn hàng', symbolSize: 25, category: 1 }
],
links: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '1', target: '3' },
{ source: '2', target: '4' }
],
categories: [
{ name: 'Dịch vụ' },
{ name: 'Cơ sở dữ liệu' }
]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ đồ thị hỗ trợ các bộ động lực bố cục thay thế như sắp xếp vòng tròn hoặc các mũi tên định hướng để hiển thị rõ ràng các mối quan hệ phụ thuộc dữ liệu.
1. Bố cục hình tròn với các mũi tên liên kết định hướng
Thiết lập layout: 'circular'để sắp xếp các nút theo cấu trúc vành tròn gọn gàng, và bật các mũi tên cạnh để hiển thị mối quan hệ định hướng giữa các thành phần:
option = {
tooltip: {},
series: [
{
type: 'graph',
layout: 'circular',
roam: true,
label: {
show: true,
position: 'outside'
},
edgeSymbol: ['none', 'arrow'], // Vẽ mũi tên tại các đầu nối
edgeSymbolSize: [0, 8],
data: [
{ id: 'A', name: 'Nút A', symbolSize: 24 },
{ id: 'B', name: 'Nút B', symbolSize: 24 },
{ id: 'C', name: 'Nút C', symbolSize: 24 },
{ id: 'D', name: 'Nút D', symbolSize: 24 },
{ id: 'E', name: 'Nút E', symbolSize: 24 }
],
links: [
{ source: 'A', target: 'B' },
{ source: 'B', target: 'C' },
{ source: 'C', target: 'D' },
{ source: 'D', target: 'E' },
{ source: 'E', target: 'A' },
{ source: 'A', target: 'C' }
],
lineStyle: {
color: '#5470c6',
width: 2,
curveness: 0.2 // Làm cong các đường nối để tránh chồng lấn
}
}
]
};
Tinh chỉnh bố cục và phong cách nút
Việc điều chỉnh độ cong cạnh, bóng viền nút và các tùy chọn tương tác giúp các cụm mạng dày đặc vẫn dễ đọc trên các trang web tương tác.
1. Màu sắc danh mục nút tùy chỉnh và vật lý lực
Điều chỉnh các giá trị đẩy và kiểu đường nét để tạo ra các cụm được cấu trúc, tách biệt về mặt thị giác:
option = {
legend: {
top: '5%',
left: 'center'
},
series: [
{
type: 'graph',
layout: 'force',
roam: true,
draggable: true,
force: {
repulsion: 250,
gravity: 0.1,
edgeLength: [50, 100]
},
categories: [
{ name: 'Frontend', itemStyle: { color: '#5470c6' } },
{ name: 'Backend', itemStyle: { color: '#91cc75' } },
{ name: 'Infrastructure', itemStyle: { color: '#fac858' } }
],
data: [
{ name: 'Ứng dụng Web', category: 0, symbolSize: 32 },
{ name: 'Ứng dụng Di động', category: 0, symbolSize: 28 },
{ name: 'Cổng API', category: 1, symbolSize: 26 },
{ name: 'Microservice A', category: 1, symbolSize: 22 },
{ name: 'Microservice B', category: 1, symbolSize: 22 },
{ name: 'Bộ nhớ đệm Redis', category: 2, symbolSize: 20 },
{ name: 'PostgreSQL', category: 2, symbolSize: 24 }
],
links: [
{ source: 'Ứng dụng Web', target: 'Cổng API' },
{ source: 'Ứng dụng Di động', target: 'Cổng API' },
{ source: 'Cổng API', target: 'Microservice A' },
{ source: 'Cổng API', target: 'Microservice B' },
{ source: 'Microservice A', target: 'Bộ nhớ đệm Redis' },
{ source: 'Microservice B', target: 'PostgreSQL' }
],
lineStyle: {
color: 'source', // Màu đường nối dựa theo màu nút nguồn
width: 2,
curveness: 0.1
}
}
]
};
Các thực hành tốt chiến lược
- Kích hoạt
roam: trueđể điều hướng:Các mạng tương tác phát triển nhanh chóng. Kích hoạt điều hướng thu phóng và kéo thả giúp người dùng tập trung vào các cụm cụ thể mà không cảm thấy chật chội. - Áp dụng
độ congcho các cạnh:Thiết lập độ cong nhẹ (ví dụ,lineStyle.curveness: 0.1đến0.2) ngăn chặn các liên kết hai chiều giữa hai nút giống nhau bị chồng chéo thành một đường duy nhất. - Lực đẩy cân bằng trong vật lý lực: Điều chỉnh
lực.đẩycẩn thận. Các giá trị quá thấp sẽ khiến các nút chồng chéo thành một cụm đặc, trong khi các giá trị quá cao sẽ đẩy các nút ra khỏi khung hình hiển thị hoàn toàn.