Tạo biểu đồ tròn cơ bản – học thư viện JS ECharts (phần 3)

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ái legend 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ã.