Gráfico de Donut: Proporções Baseadas em Anel e Métricas Centrais

Ao apresentar alocações relativas de categorias, o Gráfico de Donutoferece uma alternativa moderna e de alto contraste aos gráficos de pizza tradicionais. Ao remover o núcleo central, um gráfico de donut desloca a ênfase visual do tamanho da área preenchida para os comprimentos dos arcos ao longo do anel externo. Esse centro vazio cria um espaço visual ideal para métricas-chave de desempenho, totais resumidos ou indicadores de status, tornando-o uma peça fundamental em painéis de status executivos e resumos financeiros.

Os Mecanismos dos Gráficos de Donut

No Apache ECharts, os gráficos de donut são configurados usando o 'pie'tipo de série combinado com um array de dois elementos radius array: ['innerRadius', 'outerRadius']. O primeiro valor define a abertura central vazia, enquanto o segundo valor controla o limite externo.

1. Configuração Básica

Para criar um gráfico de donut padrão, declare uma série com type: 'pie', defina radius: ['50%', '70%'], e passe seus objetos de dados com name e value propriedades:

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Alocação de Orçamento',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: true,
            label: {
                show: false
            },
            data: [
                { value: 1048, name: 'Engenharia' },
                { value: 735, name: 'Marketing' },
                { value: 580, name: 'Operações' },
                { value: 484, name: 'Vendas' },
                { value: 300, name: 'Suporte' }
            ]
        }
    ]
};

Técnicas Estruturais Avançadas

Os gráficos de donut se destacam quando combinados com estatísticas centrais ou estilos visuais arredondados para criar componentes de interface refinados.

1. Sobrepõe Estatísticas de Rótulo Central

Utilize elementos gráficos ou componentes de título centralizados para exibir um total geral ou KPI principal diretamente dentro do anel da donut:

option = {
    title: {
        text: '$3.147',
        subtext: 'Total Gasto',
        left: 'center',
        top: '42%',
        textStyle: {
            fontSize: 28,
            fontWeight: 'bold',
            color: '#333'
        },
        subtextStyle: {
            fontSize: 14,
            color: '#666'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: 'Despesas',
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
                show: false
            },
            data: [
                { value: 1048, name: 'Hardware' },
                { value: 735, name: 'Assinaturas SaaS' },
                { value: 580, name: 'Suprimentos de Escritório' },
                { value: 484, name: 'Viagens' }
            ]
        }
    ]
};

Afinando o Layout e o Estilo dos Segmentos

Adicionar arredondamentos sutis nos cantos e margens distintas entre os segmentos dá aos gráficos de anel uma aparência elegante e moderna.

1. Extremidades Arredondadas e Espaçamento entre Segmentos

Use itemStyle.borderRadiusjuntamente com bordas brancas claras para dar a cada segmento de arco uma aparência suave, semelhante a uma pílula:

option = {
    series: [
        {
            name: 'Uso de Armazenamento',
            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: 'Arquivos de Mídia' },
                { value: 20, name: 'Dados do Sistema' },
                { value: 15, name: 'Espaço Livre' }
            ]
        }
    ]
};

Melhores Práticas Estratégicas

• Otimize a Razão entre Raio Interno e Externo:Mantenha o raio interno entre 50% e 70% do raio externo para manter os segmentos suficientemente grossos para fácil navegação, ao mesmo tempo em que preserva espaço generoso no centro.
• Utilize o Espaço Central Intencionalmente:Use a área vazia central para exibir o total geral ou a métrica de fatia selecionada, em vez de encher o perímetro do gráfico com caixas de texto adicionais.
• Mantenha os Segmentos Limitados:Limite o anel a 5 ou 6 segmentos principais. Se você tiver várias categorias pequenas, agrupe-as em uma categoria ‘Outros’ para evitar arcos finos e ilegíveis.