Biểu đồ Donut: Tỷ lệ dựa trên vành và các chỉ số trung tâm

Khi trình bày phân bổ danh mục tương đối, thìBiểu đồ Donutcung cấp một lựa chọn hiện đại, tương phản cao thay thế cho biểu đồ bánh truyền thống. Bằng cách loại bỏ phần lõi ở giữa, biểu đồ donut chuyển trọng tâm thị giác từ kích thước vùng được tô đầy sang độ dài cung dọc theo vành ngoài. Phần trung tâm rỗng này tạo ra không gian thị giác lý tưởng để hiển thị các chỉ số hiệu suất chính, tổng kết, hoặc chỉ báo trạng thái — khiến nó trở thành thành phần thiết yếu cho bảng điều khiển trạng thái cấp cao và bản tóm tắt tài chính.

Cơ chế của biểu đồ Donut

Trong Apache ECharts, biểu đồ donut được cấu hình bằng cách sử dụng'pie'kiểu chuỗi kết hợp với một mảng hai phần tửradiusmảng: ['innerRadius', 'outerRadius']. Giá trị đầu tiên xác định độ mở của phần trung tâm rỗng, trong khi giá trị thứ hai điều khiển ranh giới bên ngoài.

1. Cài đặt cơ bản

Để xây dựng biểu đồ donut tiêu chuẩn, khai báo một chuỗi vớitype: 'pie', đặtradius: ['50%', '70%'], và truyền các đối tượng dữ liệu vớiname vàvaluethuộc tính:

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Phân bổ ngân sách',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: true,
            label: {
                show: false
            },
            data: [
                { value: 1048, name: 'Kỹ thuật' },
                { value: 735, name: 'Tiếp thị' },
                { value: 580, name: 'Vận hành' },
                { value: 484, name: 'Bán hàng' },
                { value: 300, name: 'Hỗ trợ' }
            ]
        }
    ]
};

Các kỹ thuật cấu trúc nâng cao

Biểu đồ donut tỏa sáng khi kết hợp với các thống kê trung tâm hoặc phong cách thị giác bo tròn để tạo ra các thành phần giao diện người dùng hoàn chỉnh.

1. Giao diện chồng thống kê nhãn trung tâm

Sử dụng các yếu tố đồ họa hoặc các thành phần tiêu đề ở trung tâm để hiển thị tổng cộng hoặc KPI chính ngay bên trong vành biểu đồ donut:

option = {
    title: {
        text: '$3.147',
        subtext: 'Tổng chi tiêu',
        left: 'center',
        top: '42%',
        textStyle: {
            fontSize: 28,
            fontWeight: 'bold',
            color: '#333'
        },
        subtextStyle: {
            fontSize: 14,
            color: '#666'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: 'Chi phí',
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
                show: false
            },
            data: [
                { value: 1048, name: 'Thiết bị phần cứng' },
                { value: 735, name: 'Đăng ký SaaS' },
                { value: 580, name: 'Văn phòng phẩm' },
                { value: 484, name: 'Du lịch' }
            ]
        }
    ]
};

Tinh chỉnh bố cục và định dạng đoạn

Việc thêm các góc bo nhẹ nhàng và khoảng cách rõ rệt giữa các đoạn giúp biểu đồ hình donut có vẻ ngoài hiện đại, tinh tế.

1. Đầu tròn và khoảng cách giữa các đoạn

Sử dụng itemStyle.borderRadiuskết hợp cùng viền trắng rõ ràng để tạo cho mỗi đoạn cung một vẻ ngoài mềm mại, giống viên thuốc:

option = {
    series: [
        {
            name: 'Sử dụng lưu trữ',
            type: 'pie',
            radius: ['45%', '70%'],
            itemStyle: {
                borderRadius: 10,
                borderColor: '#ffffff',
                borderWidth: 4
            },
            label: {
                show: true,
                formatter: '{b}: {d}%'
            },
            data: [
                { value: 40, name: 'Tài liệu' },
                { value: 25, name: 'Tệp đa phương tiện' },
                { value: 20, name: 'Dữ liệu hệ thống' },
                { value: 15, name: 'Không gian trống' }
            ]
        }
    ]
};

Các thực hành tốt chiến lược

• Tối ưu tỷ lệ bán kính trong so với bán kính ngoài:Duy trì bán kính trong từ 50% đến 70% bán kính ngoài để đảm bảo các đoạn đủ dày để dễ dàng di chuột qua, đồng thời giữ lại không gian đủ lớn ở trung tâm.
• Sử dụng không gian trung tâm một cách có chủ ý:Sử dụng vùng trống ở trung tâm để hiển thị tổng cộng hoặc chỉ số đoạn được chọn thay vì làm rối rắm viền biểu đồ bằng các hộp văn bản bổ sung.
• Giới hạn số lượng miếng:Giới hạn vòng tròn chỉ có 5 hoặc 6 đoạn chính. Nếu bạn có nhiều danh mục nhỏ, hãy gom chúng lại thành danh mục ‘Khác’ để tránh các cung mỏng, khó đọc.