Khi trình bày các thứ tự phân cấp nhiều cấp, nơi các vòng bên trong đại diện cho các danh mục cấp cao và các vòng bên ngoài chia nhỏ các danh mục con, thìBiểu đồ Sunburst mang lại một lựa chọn hình tròn sạch sẽ thay thế cho biểu đồ treemap. Bằng cách sắp xếp các danh mục lồng ghép vào các vòng đồng tâm, biểu đồ Sunburst cho phép người dùng khám phácác tỷ lệ cấu trúc nhiều cấp, các mối quan hệ cha-con và các hành trình phân phốitrong một không gian gọn gàng—ví dụ như các danh mục sản phẩm toàn cầu, sơ đồ tổ chức hoặc các hành trình người dùng bị mất ở nhiều bước.
Cơ chế của biểu đồ Sunburst
Trong Apache ECharts, biểu đồ Sunburst sử dụngtype: 'sunburst'. Tương tự như biểu đồ treemap, chuỗi dữ liệu mong đợi một cấu trúc cây lồng ghép trong mảngdata nơi các đối tượng cha chứachildrenmảng. Bộ xử lý sẽ hiển thị nút gốc hoặc các danh mục cấp cao nhất trong vòng tròn ở bên trong nhất và mở rộng các danh mục con ra ngoài qua các lớp vòng đồng tâm.
1. Cài đặt cơ bản
Để xây dựng một biểu đồ Sunburst cơ bản, cung cấp một bộ dữ liệu cây lồng ghép và đặttype: 'sunburst'bên trong đối tượng chuỗi của bạn:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}'
},
series: [
{
type: 'sunburst',
data: [
{
name: 'Ông tổ',
children: [
{
name: 'Cha 1',
value: 15,
children: [
{ name: 'Con 1', value: 5 },
{ name: 'Con 2', value: 10 }
]
},
{
name: 'Cha 2',
value: 10,
children: [
{ name: 'Con 3', value: 10 }
]
}
]
}
],
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ Sunburst có thể được tùy chỉnh với các quy tắc định dạng theo lớp vòng, kế thừa màu sắc và các thao tác điều hướng tương tác bằng cách nhấp để phóng to.
1. Tùy chỉnh vòng theo cấp độ và điều hướng chi tiết
Sử dụnglevelsmảng để xác định các bán kính riêng biệt, hành vi nhãn và kiểu dáng mục cho từng lớp vòng đồng tâm từ tâm ra ngoài:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '2%',
left: 'center',
data: ['Điện tử', 'Nhà cửa & Cuộc sống']
},
series: [
{
type: 'sunburst',
center: ['50%', '55%'],
radius: ['10%', '85%'],
nodeClick: 'rootToNode', // Kích hoạt thao tác thu nhỏ khi nhấp vào nút
levels: [
{},
{
// Vòng trong (Danh mục cấp cao)
r0: '15%',
r: '40%',
label: { rotate: 0, fontWeight: 'bold' },
itemStyle: { borderWidth: 2 }
},
{
// Vòng giữa (Danh mục con)
r0: '40%',
r: '65%',
label: { rotate: 'tangential', fontSize: 11 }
},
{
// Vòng ngoài (Sản phẩm lá)
r0: '65%',
r: '85%',
label: { rotate: 'radial', fontSize: 10 }
}
],
data: [
{
name: 'Điện tử',
children: [
{
name: 'Âm than',
children: [
{ name: 'Tai nghe', value: 40 },
{ name: 'Loa', value: 25 }
]
},
{
name: 'Máy tính',
children: [
{ name: 'Laptop', value: 80 },
{ name: 'Máy tính để bàn', value: 35 }
]
}
]
},
{
name: 'Nhà cửa & Cuộc sống',
children: [
{
name: 'Nội thất',
children: [
{ name: 'Ghế', value: 50 },
{ name: 'Bàn', value: 30 }
]
},
{
name: 'Trang trí',
children: [
{ name: 'Đèn chiếu sáng', value: 45 },
{ name: 'Thảm trải sàn', value: 20 }
]
}
]
}
]
}
]
};
Tinh chỉnh bố cục và căn chỉnh nhãn
Điều khiển chế độ xoay nhãn (bán kính so với tiếp tuyến) giúp văn bản dễ đọc khi các đoạn nhỏ lại hướng về các vòng ngoài.
1. Khoảng cách phân tách đoạn tùy chỉnh và nhãn theo bán kính
Áp dụng viền cho mục và đặt rotate: 'radial'để căn chỉnh văn bản dọc theo các bán kính đoạn một cách gọn gàng:
option = {
series: [
{
type: 'sunburst',
radius: ['20%', '90%'],
itemStyle: {
borderRadius: 4,
borderColor: '#ffffff',
borderWidth: 2
},
label: {
show: true,
rotate: 'radial',
align: 'right'
},
data: [
{
name: 'Phần mềm',
itemStyle: { color: '#5470c6' },
children: [
{ name: 'SaaS', value: 120 },
{ name: 'Trên cơ sở', value: 60 }
]
},
{
name: 'Phần cứng',
itemStyle: { color: '#91cc75' },
children: [
{ name: 'Máy chủ', value: 90 },
{ name: 'Mạng', value: 110 }
]
},
{
name: 'Dịch vụ',
itemStyle: { color: '#fac858' },
children: [
{ name: 'Tư vấn', value: 70 },
{ name: 'Hỗ trợ', value: 50 }
]
}
]
}
]
};
Các thực hành tốt chiến lược
- Phù hợp độ xoay nhãn với độ sâu của vòng tròn: Sử dụng ngang (
rotate: 0) hoặc nhãn tiếp tuyến cho các vòng trong rộng, và chuyển sangbán kínhnhãn cho các đoạn ngoài hẹp. - Kích hoạt
nodeClick: 'rootToNode':Chế độ thu phóng tương tác cho phép người dùng nhấp vào bất kỳ cung cha nào để tập trung trực tiếp vào cây con của nó mà không gây rối mắt. - Sử dụng kế thừa màu sắc:Cho phép các đoạn con kế thừa sắc độ cơ bản từ nút cha của chúng với độ sáng/độ bão hòa thay đổi để duy trì sự nhóm hình ảnh rõ ràng qua các cấp độ.