Khi khám phá mối quan hệ hoặc tương quan giữa hai biến liên tục, thìBiểu đồ phân tán (hay còn gọi là biểu đồ phân tán) là công cụ phân tích chính. Bằng cách vẽ các điểm dữ liệu trên một lưới hai chiều dựa trên tọa độ số X và Y, biểu đồ phân tán giúp tiết lộnhóm tập trung, điểm ngoại lệ, xu hướng và tương quantrên các tập dữ liệu phức tạp, chẳng hạn như chi phí tiếp thị so với số lượng khách hàng tiềm năng hoặc trải nghiệm nhân viên so với mức lương.
Cơ chế của biểu đồ phân tán
Khác với biểu đồ cột hoặc biểu đồ đường dựa trên danh mục, biểu đồ phân tán sử dụng trục giá trị số cho cả hai chiều. Trong Apache ECharts, thiết lậptype: 'scatter'dự kiến dữ liệu được định dạng dưới dạng mảng tọa độ số gồm hai phần tử[x, y]hoặc các đối tượng dữ liệu được ánh xạ qua cáctrụcXvàtrụcYcấu hình.
1. Cài đặt cơ bản
Để xây dựng biểu đồ phân tán cơ bản, hãy xác địnhtype: 'value'trên cả hai trục và cung cấp các cặp tọa độ số trong mảng dữ liệu chuỗi của bạn:
option = {
tooltip: {
trigger: 'item',
formatter: 'X: {c0}rnY: {c1}'
},
xAxis: {
type: 'value',
name: 'Chi phí quảng cáo ($k)'
},
yAxis: {
type: 'value',
name: 'Chuyển đổi'
},
series: [
{
type: 'scatter',
symbolSize: 12,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.03, 7.24],
[12.0, 4.26],
[7.08, 4.82],
[5.02, 5.68]
]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ phân tán có thể tích hợp kích thước động để biểu diễn biến thứ ba (biểu đồ bong bóng) hoặc hiển thị các lớp chồng chéo nhóm đa thể loại.
1. Kích thước điểm thay đổi (Hiệu ứng bong bóng)
Truyền một hàm tùy chỉnh hoặc ánh xạ giá trị dữ liệu vàosymbolSizeđể mã hóa một chỉ số định lượng thứ ba vào kích thước điểm:
option = {
tooltip: {
trigger: 'item',
formatter: function (param) {
return 'Chi tiêu: $' + param.data[0] + 'k
' +
'Doanh thu: $' + param.data[1] + 'k
' +
'ROAS: ' + param.data[2] + 'x';
}
},
xAxis: {
type: 'value',
name: 'Chi tiêu'
},
yAxis: {
type: 'value',
name: 'Doanh thu'
},
series: [
{
name: 'Chiến dịch',
type: 'scatter',
symbolSize: function (data) {
return data[2] * 5; // Tỷ lệ kích thước bong bóng theo biến thứ ba
},
data: [
[15, 120, 8.0],
[25, 180, 7.2],
[10, 50, 5.0],
[40, 380, 9.5],
[30, 210, 7.0]
],
itemStyle: {
color: '#5470c6',
opacity: 0.7
}
}
]
};
Tinh chỉnh bố cục và định dạng
Kiểm soát độ trong suốt của các điểm đánh dấu và thêm các đường xu hướng mục tiêu giúp ngăn các cụm dày đặc trở thành những khối hình ảnh đặc cứng.
1. Các điểm đánh dấu trong suốt và định dạng cụm
Áp dụng viền đường viền và màu điền bán trong suốt giúp các điểm dữ liệu chồng chéo vẫn hiển thị rõ ràng trong các cụm có mật độ cao:
option = {
grid: {
left: '10%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value',
scale: true // Tự động điều chỉnh min/max trục để phù hợp với dữ liệu chặt chẽ hơn
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'scatter',
symbolSize: 16,
itemStyle: {
color: 'rgba(84, 112, 198, 0.6)',
borderColor: '#5470c6',
borderWidth: 2
},
data: [
[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
[155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8],
[176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2]
]
}
]
};
Các thực hành tốt chiến lược
- Kích hoạt
scale: truetrên các trục số: Đặtscale: truetrên cả hai trục số để biểu đồ tự thu phóng vào phạm vi dữ liệu liên quan thay vì buộc gốc tọa độ tại(0,0). - Sử dụng độ trong suốt cho vùng chồng chéo: Khi vẽ hàng trăm điểm, giảm độ trong suốt của phần điền xuống khoảng 0.4–0.6 để các vùng chồng chéo dày đặc xuất hiện tự nhiên hơn về độ tối.
- Cung cấp nhãn trục có ngữ cảnh: Luôn đánh nhãn rõ ràng cho trục X và Y bằng đơn vị đo lường (ví dụ: “$ nghìn” hoặc “Độ trễ trong ms”) để giá trị được hiểu ngay lập tức mà không cần kiểm tra công cụ gợi ý.