Khi trình bày các tỷ lệ tương đối hoặc phần trăm đóng góp của một tổng cố định duy nhất, thìBiểu đồ tròn là lựa chọn quen thuộc và trực quan. Bằng cách chia một hình tròn thành các miếng tỷ lệ, biểu đồ tròn giúp người xem nhanh chóng hiểu đượccách các thành phần riêng lẻ đóng góp vào một tổng thể thống nhất, chẳng hạn như phân bố thị phần, tỷ lệ ưa thích thiết bị hoặc phân bổ chi phí theo hạng mục.
Cơ chế của biểu đồ tròn
Khác với biểu đồ Cartesian sử dụng trục ngang và trục dọc, biểu đồ tròn ánh xạ dữ liệu phân loại trực tiếp sang các góc bán kính trên hệ tọa độ cực. Trong Apache ECharts, biểu đồ tròn được tạo bằng cách thiết lập thuộc tính seriestype thành 'pie' và cung cấp một mảng các đối tượng, trong đó mỗi mục chứa một giá trị số họcvalue và mô tảname.
1. Cài đặt cơ bản
Để xây dựng biểu đồ tròn cơ bản, hãy xác định một chuỗi duy nhất vớitype: 'pie' và truyền bộ dữ liệu có cấu trúc của bạn vào trong mảngdatamảng:
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Nguồn truy cập',
type: 'pie',
radius: '60%',
data: [
{ value: 1048, name: 'Công cụ tìm kiếm' },
{ value: 735, name: 'Trực tiếp' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Quảng cáo liên minh' },
{ value: 300, name: 'Quảng cáo video' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ tròn có thể được điều chỉnh thành bố cục hình donut dạng vành khuyên hoặc được định dạng với bán kính tùy chỉnh để nhấn mạnh các đoạn dữ liệu chính.
1. Biến thể biểu đồ donut
Thiết lậpbán kính thuộc tính dưới dạng mảng hai giá trị (ví dụ: ['40%', '70%']) tạo thành phần trống ở giữa để tạo biểu đồ donut sạch sẽ. Điều này để lại khoảng trống ở giữa cho các nhãn tóm tắt tùy chỉnh:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Loại thiết bị',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 8,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold'
}
},
data: [
{ value: 1048, name: 'Máy tính để bàn' },
{ value: 735, name: 'Di động' },
{ value: 580, name: 'Máy tính bảng' },
{ value: 484, name: 'Khác' }
]
}
]
};
Tinh chỉnh bố cục và phong cách
Kiểm soát các đường dẫn nhãn và viền các mảnh giúp biểu đồ tròn dễ đọc ngay cả khi xử lý các giá trị dữ liệu nhỏ.
1. Tách riêng các mảnh tùy chỉnh và các đường dẫn nhãn
Áp dụng độ rộng viền mục và cấu hình các đường hướng dẫn bên ngoài ngăn chặn hiện tượng chồng chéo văn bản trên các mảnh kề nhau:
option = {
series: [
{
name: 'Phần thị phần',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{ value: 40, name: 'Thương hiệu A' },
{ value: 30, name: 'Thương hiệu B' },
{ value: 15, name: 'Thương hiệu C' },
{ value: 10, name: 'Thương hiệu D' },
{ value: 5, name: 'Khác' }
],
label: {
formatter: '{b}: {d}%'
},
labelLine: {
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
Các thực hành tốt chiến lược
- Hạn chế số lượng mảnh ở mức 5 hoặc 6:Quá nhiều mảnh nhỏ khiến biểu đồ tròn khó đọc. Gom các giá trị nhỏ vào danh mục ‘Khác’ để giữ sự tập trung rõ ràng.
- Sắp xếp các mảnh theo kích thước:Đặt mảnh lớn nhất bắt đầu từ vị trí 12 giờ và sắp xếp các mảnh còn lại theo thứ tự chiều kim đồng hồ để dễ dàng quét nhanh.
- Hiển thị phần trăm trực tiếp trong công cụ gợi ý hoặc nhãn: Luôn bao gồm
{d}%trong bộ định dạng nhãn hoặc công cụ gợi ý để người xem ngay lập tức thấy tỷ lệ phần trăm mà không cần phải tính toán trong đầu.