Khi theo dõi các chuyển giao liên tục, phân bổ nguồn lực hoặc hành trình người dùng đa giai đoạn, thìBiểu đồ Sankey là công cụ trực quan hóa hàng đầu. Bằng cách vẽ các dải dòng chảy tỷ lệ giữa các nút giai đoạn theo thứ tự, biểu đồ Sankey minh họacách tổng lượng được chia tách, kết hợp và chuyển tiếp qua các hệ thống phức tạp—ví dụ như ống dẫn chuyển đổi người dùng trang web, mạng lưới phân phối năng lượng hoặc phân bổ ngân sách tổ chức.
Cơ chế của biểu đồ Sankey
Trong Apache ECharts, biểu đồ Sankey sử dụngtype: 'sankey'. Tương tự như biểu đồ đồ thị, một biểu đồ Sankey được xác định bởi danh sách cácnút (hoặcdata) và cáclinks (hoặccạnh). Mỗi liên kết chứa tênnguồntên nút nguồn, tênmục tiêutên nút đích, và một giá trị sốgiá trịxác định độ rộng trực quan của đường dòng chảy kết nối.
1. Cài đặt cơ bản
Để xây dựng biểu đồ Sankey cơ bản, khai báo các mục nút của bạn bên trongdatavà xác định thể tích dòng chảy theo hướng tronglinks:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: [
{ name: 'Doanh thu tổng cộng' },
{ name: 'Bán hàng sản phẩm' },
{ name: 'Dịch vụ' },
{ name: 'Tiếp thị' },
{ name: 'Nghiên cứu và phát triển' },
{ name: 'Lợi nhuận' }
],
links: [
{ source: 'Doanh thu tổng cộng', target: 'Bán hàng sản phẩm', value: 70 },
{ source: 'Doanh thu tổng cộng', target: 'Dịch vụ', value: 30 },
{ source: 'Bán hàng sản phẩm', target: 'Tiếp thị', value: 30 },
{ source: 'Bán hàng sản phẩm', target: 'Nghiên cứu và phát triển', value: 25 },
{ source: 'Bán hàng sản phẩm', target: 'Lợi nhuận', value: 15 },
{ source: 'Dịch vụ', target: 'Lợi nhuận', value: 30 }
],
emphasis: {
focus: 'adjacency'
},
lineStyle: {
color: 'gradient',
curveness: 0.5
}
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ Sankey có thể được tùy chỉnh với hướng dòng chảy thẳng đứng, màu sắc nút đa cấp và làm nổi bật liên kết động để theo dõi từng hành trình riêng lẻ qua các mạng lưới phức tạp.
1. Hướng dòng chảy thẳng đứng
Thiết lập orient: 'vertical'để chuyển đổi các luồng giai đoạn ngang thành chế độ xem thác nước thẳng đứng từ trên xuống dưới:
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
orient: 'vertical',
nodeWidth: 20,
nodeGap: 16,
data: [
{ name: 'Lượt truy cập trang web' },
{ name: 'Trang sản phẩm' },
{ name: 'Bỏ trang ngay' },
{ name: 'Giỏ hàng' },
{ name: 'Thanh toán' }
],
links: [
{ source: 'Lượt truy cập trang web', target: 'Trang sản phẩm', value: 1000 },
{ source: 'Lượt truy cập trang web', target: 'Bỏ trang ngay', value: 400 },
{ source: 'Trang sản phẩm', target: 'Giỏ hàng', value: 600 },
{ source: 'Giỏ hàng', target: 'Thanh toán', value: 450 }
],
lineStyle: {
color: 'source',
curveness: 0.5
}
}
]
};
Tinh chỉnh bố cục và định dạng liên kết
Việc điều chỉnh khoảng cách nút, độ cong đường kẻ và hành vi làm nổi bật khi di chuột giúp các luồng đa giai đoạn phức tạp luôn rõ ràng và dễ đọc.
1. Điều khiển khoảng cách nút và luồng gradient nguồn – đích
Tùy chỉnh nodeGap và thiết lập lineStyle.color: 'gradient'tạo ra các chuyển tiếp màu sắc mượt mà giữa các giai đoạn:
option = {
series: [
{
type: 'sankey',
left: '5%',
right: '15%',
nodeWidth: 24,
nodeGap: 18,
draggable: true,
label: {
position: 'right',
color: '#333',
fontSize: 12
},
data: [
{ name: 'Nguồn A', itemStyle: { color: '#5470c6' } },
{ name: 'Nguồn B', itemStyle: { color: '#91cc75' } },
{ name: 'Giai đoạn 1', itemStyle: { color: '#fac858' } },
{ name: 'Giai đoạn 2', itemStyle: { color: '#ee6666' } },
{ name: 'Kết quả cuối cùng', itemStyle: { color: '#73c0de' } }
],
links: [
{ source: 'Nguồn A', target: 'Giai đoạn 1', value: 50 },
{ source: 'Nguồn B', target: 'Giai đoạn 1', value: 30 },
{ source: 'Giai đoạn 1', target: 'Giai đoạn 2', value: 60 },
{ source: 'Giai đoạn 1', target: 'Kết quả cuối cùng', value: 20 },
{ source: 'Giai đoạn 2', target: 'Kết quả cuối cùng', value: 60 }
],
lineStyle: {
color: 'gradient',
curveness: 0.6,
opacity: 0.4
}
}
]
};
Các thực hành tốt chiến lược
- Duy trì bảo toàn dòng chảy: Đảm bảo tổng các giá trị chảy vào một nút bằng hoặc hợp lý giải thích các giá trị chảy ra để tránh các khoảng trống thị giác gây hiểu lầm.
- Kích hoạt
emphasis.focus: 'kề cận':Khi xử lý các luồng nhiều giai đoạn, việc tập trung vào các liên kết kề cận khi di chuột qua cho phép người dùng tách biệt các con đường cụ thể mà không bị nhiễu hình ảnh. - Sử dụng liên kết_gradient: Đặt
lineStyle.color: 'gradient'tạo sự chuyển tiếp mượt mà từ màu nút nguồn sang màu nút đích, giúp các chuyển tiếp nhiều giai đoạn trở nên trực quan về mặt hình ảnh.