Tôi vẫn thường ưu tiên biểu đồ cột nhiều nhất, cơ mà biểu đồ tròn cũng hay khi mà chúng ta chỉ có vài dữ liệu đưa vào hoặc thích sự mềm mại của nó.
A. Biểu đồ tròn đơn giản

Mã mẫu:
option = {
title: {
text: 'Một ngày của tôi',
subtext: 'nếu tôi ở nhà một mình',
left: 'center',
textStyle: {
fontSize: 20,
fontFamily: "Arial"
}
},
tooltip: { // kích hoạt hiệu ứng tool tip khi hover chuột
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: 'sinh hoạt',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: 'luyện code'},
{value: 735, name: 'nghĩ vẩn vơ'},
{value: 580, name: 'lạc vào FB và Youtube'},
{value: 484, name: 'xem phim'},
{value: 300, name: 'nghe nhạc'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 1)'
}
}
}
]
};
Một số câu lệnh mới mà chúng ta thấy:
left: 'center'
dùng để căn giữa;orient: 'vertical'
bình thường cáilegend
sẽ xếp từ trái qua phải, để như thế này nó sẽ xếp theo trục đứng;type: 'pie'
: dùng để chỉ biểu đồ tròn;radius: '50%'
đùng để chỉ kích cỡ tương đối;- phần cuối chỗ
emphasis
dùng để tạo hiệu ứng blur khi hover vào item, nó có các chọn lựa về mức độ loang của màu, độ lệch và màu blur;
B. Biểu đồ tròn rỗng giữa với chú thích được nhấn mạnh

Mã mẫu:
option = {
tooltip: { // kích hoạt tool tip
trigger: 'item'
},
legend: { // căn lề vị trí cho legend
top: '5%', // lề trên 5%
left: 'center' // căn giữa, anh chị em biết CSS chắc không lạ
},
series: [
{
name: 'Nguồn truy cập website', // nhãn dán dữ liệu
type: 'pie', // kiểu tròn
radius: ['40%', '70%'], // kích cỡ tương đối, giá trị đầu là hình tròn nhỏ, giá trị sau là hình tròn lớn
avoidLabelOverlap: false,
itemStyle: { // tùy chỉnh item
borderRadius: 10, // mức bo tròn của item
borderColor: '#fff', // màu của item
borderWidth: 3, // độ rộng của viền
},
label: {
show: false,
position: 'center' // nhãn sẽ xuất hiện ở giữa hình tròn
},
emphasis: {
label: {
show: true,
fontSize: '30', // quy định kích cỡ font chữ
fontWeight: 'bold', // bôi đậm chữ
fontFamily: "Arial", // chọn loại font hiển thị được tiếng Việt
}
},
labelLine: {
show: false, // để chú thích không ở dạng mặc định nữa (ở bên ngoài đường tròn và có một đường nối đến)
},
data: [ // dữ liệu đầu vào
{value: 1048, name: 'Qua tìm kiếm'},
{value: 735, name: 'Qua mạng xã hội'},
{value: 580, name: 'Trả tiền'},
{value: 484, name: 'Giới thiệu'},
{value: 300, name: 'Trực tiếp'}
],
}
]
};
Các giải thích ý nghĩa tôi để ngay trong mã.
C. Biểu đồ tròn hình rẻ quạt với kích cỡ item thay đổi theo giá trị

Mã mẫu:
option = {
legend: {
top: 'bottom', // tức là để olegend ở cuối biểu đồ
},
toolbox: { // hiển thị tiện ích góc ngoài, phía trên, bên phải
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false}, // hiển thị data
restore: {show: true},
saveAsImage: {show: true} // cho phép tải biểu đồ dạng ảnh
}
},
tooltip: { // kích hoạt hiệu ứng tool tip khi hover chuột
trigger: 'item'
},
series: [
{
name: 'Theo khu vực', // nhãn dán của dữ liệu
type: 'pie', // kiểu tròn
radius: [5, 250], // xác định kích cỡ vòng tròn nhỏ và lớn, giá trị tuyệt đối
center: ['50%', '50%'], // căn vị trí tương đối
roseType: 'area', // hiệu ứng to nhỏ tùy theo độ lớn của item
itemStyle: {
borderRadius: 5 // mức độ cong của đường viền
},
data: [ // dữ liệu đầu vào
{value: 40, name: 'rose 1'},
{value: 38, name: 'rose 2'},
{value: 32, name: 'rose 3'},
{value: 30, name: 'rose 4'},
{value: 28, name: 'rose 5'},
],
}
]
};
Các chú thích cũng được tôi để trong mã mẫu.
D. Biểu đồ tròn có ảnh nền và kèm hiệu ứng khi click vào từng phần

Mã mẫu (bạn truy cập link này để lấy mã ảnh base 64 của nó đặt ở ngay đầu để có được hình như trên, hoặc sử dụng mã bên dưới với hình nền đơn giản hơn và mã cũng nhẹ hơn):
var piePatternSrc = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5QgbDRUvqYnz0AAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAC90lEQVQ4jW2TT2hcVRjFf/fd++bNZCYzyXTGmZSkGmiopcVSTamFgpTqQqtoN1L/QDctBcFNVxXX4krdSDfiwoVKCy6CEBfFUoMuqihE0ymNwTqZSTuZzP8/b97c9+ZdF7aS2n5wVt/5zseBczDG8H8cBHUFZr+D/KP22yGMMWyfn/aJN/NH599P7D84Gwz7gS4Xl2u//vJV66a+MnPqyLGY132mduNmMSiMPj3cNt0HBJamxbGp55++Onf2XbxOGeM2sC1Jv9qjdbfSe2z3VCKWjOOt3GB54ftv3Z/1SbX9u8xEzkwfOsLW0gJ+eQ0iUYS0cXKPkz98PNG/dZ1e6Q7RZJr0VP6VdnJ9/wMCRjrCu32bQaUIlsGIARZD/OoybqkMYYjx+oRjMcKRIYwyoQCu7RXx9AynJ3bteLK+XsBvewgjMTYIEaKccXCrCEsglEJol2ajFwYjNtSiEJGdLyYv7Xnt1AlmpmnfLTIobaK3GoztnEQ3t+j+voo0KYRUYIWEvqbT6H39cs2sqViW+cyeQye0nWBwfQmhbMYns8i985j2BvFsHm+jRqOwRahSjFkhpU6jONj0LwAo4ijd6NH98Sq+NwApQRSxnBUwIGMOxh3htjXScqnQu1Xu6JfONU0ZQFyeIJ6fy/6Rm0zOjiyDpcS/Xi2BkJJQSurFCvWiy0gMW2EYns1HuCOSrD27YqrCGMPibuv1VDR9CWWDLZDSQlgCS0n00GOzUsdOjZM/sE+Pyn+2nWCYbTU6P1AIj/8XpIUn7A9TJnpBG0UgDLZSCDlC21pHUyqSyMSJ7chi+l2U8dn8q6bLv3mT1v0MvPq3/149cD8IAo2jAX9Iq9/5xJL+WzEnROge3dIq/XaVoNnE84JrqzB4qAtf7hKnEyJy3g2DL94ojT4G+GZGfJQet88PlYWDodPT690OL7xdM6uPbNhzEL8n7ACJHIx9Nm1fXDyQM5fnkoXPMzx1n/vQMSDuIQZMABkgBUQvTnH0nSi57fx/AEUEqDlNzSKCAAAAAElFTkSuQmCC';
var bgPatternSrc = 'data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mO8t8G7HgAGpwJaiAT7DQAAAABJRU5ErkJggg==';
var piePatternImg = new Image();
piePatternImg.src = piePatternSrc; // đưa ảnh nền vào hình tròn
var bgPatternImg = new Image();
bgPatternImg.src = bgPatternSrc; // đưa ảnh nền vào bg
var itemStyle = {
normal: {
opacity: 0.69, // chỉ mức độ trong suốt của ảnh nền
color: {
image: piePatternImg,
repeat: 'repeat'
},
borderWidth: 3, // chọn kích cỡ của đường viền
borderColor: '#135894' // chọn màu cho đường viền
}
};
option = {
backgroundColor: {
image: bgPatternImg,
repeat: 'repeat'
},
title: {
text: 'Biểu đồ tròn ảnh nền',
textStyle: {
color: '#335894', // màu văn bản
fontFamily: 'arial', // chọn font chữ
}
},
tooltip: {},
series: [{
name: 'pie',
type: 'pie',
selectedMode: 'single', // tạo hiệu ứng khi click vào thì nó tách ra khỏi hình tròn
selectedOffset: 30, // quy định độ lớn về mức độ tách
clockwise: true,
label: {
fontSize: 28, // lựa chọn kích cỡ cho nhãn
color: '#235894' // lựa chọn màu sắc cho nhãn
},
labelLine: {
lineStyle: {
color: '#235894' // chọn màu sắc cho đường nối đến chú thích
}
},
data: [
{value: 1048, name: 'AAA'}, // cái được đặt đầu tiên sẽ xuất hiện ở góc trên bên tay phải
{value: 735, name: 'BBB'}, // rồi cứ thể theo chiều kim đồng hồ
{value: 580, name: 'CCC'}, // đến cái thứ ba rồi thứ tư, vân vân
{value: 484, name: 'DDD'},
{value: 300, name: 'EEE'}
],
itemStyle: itemStyle
}]
};
Giải thích nằm trong mã.