Khi theo dõi sự giảm dần theo từng bước tuần tự hoặc các đường ống chuyển đổi, thìBiểu đồ hình nón là công cụ trực quan tiêu chuẩn. Bằng cách hiển thị các giá trị dưới dạng các khối hình thang chồng lên nhau, thu hẹp hoặc mở rộng qua từng giai đoạn, biểu đồ hình nón giúp người dùng dễ dàng nhận diệncác điểm nghẽn chuyển đổi, tỷ lệ giảm dần và hiệu quả quy trình chỉ trong một cái nhìn—ví dụ như các giai đoạn đường ống bán hàng, luồng thanh toán thương mại điện tử hoặc các đường ống tạo khách hàng tiềm năng.
Cơ chế hoạt động của biểu đồ hình nón
Trong Apache ECharts, biểu đồ hình nón được hiển thị bằng cách sử dụngtype: 'funnel'. Mỗi đối tượng dữ liệu chứa mộtname và một giá trị sốvalue. Bộ xử lý tự động sắp xếp dữ liệu từ lớn nhất đến nhỏ nhất (hoặc ngược lại) và điều chỉnh độ rộng của mỗi hình thang tương ứng với giá trị lớn nhất trong chuỗi.
1. Cài đặt cơ bản
Để xây dựng biểu đồ hình nón cơ bản, cung cấp các giai đoạn danh mục bên trong mảng dữ liệu chuỗi của bạn và đặttype: 'funnel':
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center',
data: ['Yêu cầu', 'Đề xuất', 'Báo giá', 'Thương lượng', 'Giao dịch']
},
series: [
{
name: 'Đường ống bán hàng',
type: 'funnel',
left: '10%',
top: '18%',
bottom: '10%',
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
data: [
{ value: 100, name: 'Yêu cầu' },
{ value: 80, name: 'Đề xuất' },
{ value: 60, name: 'Báo giá' },
{ value: 40, name: 'Thương lượng' },
{ value: 20, name: 'Giao dịch' }
]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ hình nón có thể được tùy chỉnh với bố cục hình chóp, căn chỉnh giai đoạn tùy chỉnh hoặc chồng lớp hai biểu đồ hình nón để so sánh các kênh chuyển đổi khác nhau.
1. Bố cục hình chóp ngược và căn chỉnh tùy chỉnh
Thay đổisort: 'ascending' để tạo hình chóp ngược, hoặc điều chỉnhfunnelAlign để căn chỉnh các giai đoạn dọc theo mép trái hoặc phải:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Kim tự tháp chuyển đổi',
type: 'funnel',
left: '15%',
top: '18%',
bottom: '10%',
width: '70%',
sort: 'ascending', // Vẽ giai đoạn nhỏ nhất ở trên, lớn nhất ở dưới
funnelAlign: 'center',
label: {
show: true,
position: 'right'
},
data: [
{ value: 20, name: 'Giai đoạn 1: Nhận thức' },
{ value: 40, name: 'Giai đoạn 2: Quan tâm' },
{ value: 60, name: 'Giai đoạn 3: Quyết định' },
{ value: 80, name: 'Giai đoạn 4: Hành động' }
]
}
]
};
Tinh chỉnh bố cục và định dạng các giai đoạn
Việc thêm khoảng cách, viền bo tròn và định dạng nhãn tùy chỉnh tạo khoảng cách rõ ràng giữa các giai đoạn chuyển đổi.
1. Khoảng cách giai đoạn tùy chỉnh và nhãn phần trăm
Điều chỉnh khoảng cách khoảng cách giữa các hình thang và sử dụng định dạng nhãn tùy chỉnh để làm nổi bật tỷ lệ giữ chân phần trăm qua các giai đoạn:
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} Người dùng'
},
series: [
{
name: 'Chuyển đổi người dùng',
type: 'funnel',
left: '10%',
top: '10%',
bottom: '10%',
width: '80%',
gap: 6, // Thêm khoảng cách rõ ràng giữa các giai đoạn
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
borderRadius: 4
},
label: {
show: true,
position: 'inside',
formatter: '{b}n{c} ({d}%)',
color: '#fff',
fontSize: 12
},
data: [
{ value: 5000, name: 'Lượt truy cập ứng dụng' },
{ value: 3400, name: 'Đăng ký' },
{ value: 2100, name: 'Thiết lập hồ sơ' },
{ value: 1200, name: 'Hành động đầu tiên' },
{ value: 800, name: 'Đã đăng ký' }
]
}
]
};
Các thực hành tốt chiến lược
- Giữ các giai đoạn theo thứ tự:Biểu đồ hình nón dựa trên logic luồng tuần tự. Đảm bảo các mục dữ liệu đại diện cho quy trình từng bước thực tế thay vì các danh mục không liên quan.
- Sử dụng
khoảng cáchđể tạo ranh giới thị giác rõ ràng cho các giai đoạn: Đặt một khoảng cách nhỏkhoảng cách(ví dụ: 4px đến 6px) giữa các hình thang ngăn không cho các màu kề nhau trộn lẫn vào nhau thành một khối duy nhất. - Hiển thị phần trăm giai đoạn: Kết hợp số liệu thô với phần trăm từng bước (ví dụ: sử dụng
{d}%trong định dạng nhãn) để người dùng có thể đánh giá ngay lập tức tỷ lệ giảm dần tại mỗi mốc quan trọng.