Gráfico de donut: proporciones basadas en anillos y métricas centrales

Al presentar asignaciones relativas de categorías, el Gráfico de donutofrece una alternativa moderna y de alto contraste frente a los gráficos de pastel sólidos tradicionales. Al eliminar el núcleo central, un gráfico de donut desplaza el enfoque visual del tamaño del área rellena hacia las longitudes de los arcos a lo largo del anillo exterior. Este centro hueco crea un espacio visual ideal para métricas clave de desempeño, totales resumidos o indicadores de estado, convirtiéndolo en una pieza fundamental para paneles de control ejecutivos y resúmenes financieros.

La mecánica de los gráficos de donut

En Apache ECharts, los gráficos de donut se configuran utilizando el 'pie'tipo de serie combinado con un array de dos elementos radio array: ['radioInterior', 'radioExterior']. El primer valor define la abertura central hueca, mientras que el segundo valor controla el límite exterior.

1. Configuración esencial

Para crear un gráfico de donut estándar, declare una serie con type: 'pie', establezca radio: ['50%', '70%'], y pase sus objetos de datos con nombre y valor propiedades:

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    leyenda: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Asignación de presupuesto',
            type: 'pie',
            radio: ['50%', '70%'],
            center: ['50%', '55%'],
            evitarSolapamientoEtiquetas: true,
            label: {
                show: false
            },
            data: [
                { value: 1048, name: 'Ingeniería' },
                { value: 735, name: 'Marketing' },
                { value: 580, name: 'Operaciones' },
                { value: 484, name: 'Ventas' },
                { value: 300, name: 'Soporte' }
            ]
        }
    ]
};

Técnicas estructurales avanzadas

Los gráficos de donut destacan cuando se combinan con estadísticas centrales o estilos visuales redondeados para crear componentes de interfaz de usuario pulidos.

1. Superposición de estadísticas con etiqueta central

Utilice elementos gráficos o componentes de título centrados para mostrar un total general o una KPI principal directamente dentro del anillo de donut:

option = {
    title: {
        text: '$3,147',
        subtext: 'Gastos totales',
        left: 'center',
        top: '42%',
        textStyle: {
            fontSize: 28,
            fontWeight: 'bold',
            color: '#333'
        },
        subtextStyle: {
            fontSize: 14,
            color: '#666'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: 'Gastos',
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
                show: false
            },
            data: [
                { value: 1048, name: 'Hardware' },
                { value: 735, name: 'Suscripciones SaaS' },
                { value: 580, name: 'Suministros de oficina' },
                { value: 484, name: 'Viajes' }
            ]
        }
    ]
};

Afinando el diseño y el estilo de los segmentos

Agregar radios de esquinas sutiles y márgenes distintos entre segmentos da a los gráficos de donut un aspecto elegante y moderno.

1. Extremos redondeados y separación entre segmentos

Utilice itemStyle.borderRadiusjunto con bordes blancos claros para dar a cada segmento de arco una apariencia suave y similar a una píldora:

option = {
    series: [
        {
            name: 'Uso de almacenamiento',
            type: 'pie',
            radius: ['45%', '70%'],
            itemStyle: {
                borderRadius: 10,
                borderColor: '#ffffff',
                borderWidth: 4
            },
            label: {
                show: true,
                formatter: '{b}: {d}%'
            },
            data: [
                { value: 40, name: 'Documentos' },
                { value: 25, name: 'Archivos multimedia' },
                { value: 20, name: 'Datos del sistema' },
                { value: 15, name: 'Espacio libre' }
            ]
        }
    ]
};

Prácticas recomendadas estratégicas

• Optimice la relación entre radio interno y externo:Mantenga un radio interno entre el 50% y el 70% del radio externo para que los segmentos sean lo suficientemente gruesos para facilitar el paso del cursor, al tiempo que se conserva espacio suficiente en el centro.
• Utilice intencionalmente el espacio central:Utilice el área hueca central para mostrar el total general o la métrica de la porción seleccionada, en lugar de llenar el perímetro del gráfico con cuadros de texto adicionales.
• Mantenga limitado el número de porciones:Límite el anillo a 5 o 6 segmentos principales. Si tiene muchas categorías pequeñas, agrúpelas en una categoría de ‘Otros’ para evitar arcos delgados e ilegibles.