Кольцевая диаграмма: пропорции по кольцу и метрики в центре

При представлении относительных распределений по категориям, Кольцевая диаграммапредлагает современную, высококонтрастную альтернативу традиционным сплошным круговым диаграммам. Убрав центральную часть, кольцевая диаграмма смещает визуальное внимание с размера заполненной области на длину дуг вдоль внешнего кольца. Пустое пространство в центре создаёт идеальное место для ключевых показателей эффективности, итоговых сумм или индикаторов состояния — что делает её незаменимой для дашбордов руководства и финансовых сводок.

Механика кольцевых диаграмм

В Apache ECharts кольцевые диаграммы настраиваются с помощью 'pie' типа серии, объединённого с двухэлементным массивом radius массивом: ['innerRadius', 'outerRadius']. Первое значение определяет размер пустого центрального отверстия, а второе значение управляет внешней границей.

1. Основная настройка

Чтобы создать стандартную кольцевую диаграмму, объявите серию с type: 'pie', установите radius: ['50%', '70%'], и передайте объекты данных с параметрами name и value свойства:

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Распределение бюджета',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: true,
            label: {
                show: false
            },
            data: [
                { value: 1048, name: 'Инженерия' },
                { value: 735, name: 'Маркетинг' },
                { value: 580, name: 'Операции' },
                { value: 484, name: 'Продажи' },
                { value: 300, name: 'Поддержка' }
            ]
        }
    ]
};

Продвинутые структурные техники

Кольцевые диаграммы отлично справляются, когда сочетаются с центральными статистическими данными или округлой визуальной стилизацией для создания готовых компонентов интерфейса.

1. Накладка статистики с центральной меткой

Используйте графические элементы или центрированные компоненты заголовков для отображения общей суммы или основного KPI непосредственно внутри кольцевой диаграммы:

option = {
    title: {
        text: '$3,147',
        subtext: 'Общие расходы',
        left: 'center',
        top: '42%',
        textStyle: {
            fontSize: 28,
            fontWeight: 'bold',
            color: '#333'
        },
        subtextStyle: {
            fontSize: 14,
            color: '#666'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: 'Расходы',
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
                show: false
            },
            data: [
                { value: 1048, name: 'Оборудование' },
                { value: 735, name: 'Подписки SaaS' },
                { value: 580, name: 'Канцтовары' },
                { value: 484, name: 'Поездки' }
            ]
        }
    ]
};

Тонкая настройка макета и стилизации сегментов

Добавление небольших радиусов закругления и четких отступов между сегментами придает круговым диаграммам элегантный, современный вид.

1. Закругленные концы и интервалы между сегментами

Используйте itemStyle.borderRadiusв сочетании с четкими белыми границами, чтобы придать каждому сегменту дуги мягкий, таблеткообразный вид:

option = {
    series: [
        {
            name: 'Использование хранилища',
            type: 'pie',
            radius: ['45%', '70%'],
            itemStyle: {
                borderRadius: 10,
                borderColor: '#ffffff',
                borderWidth: 4
            },
            label: {
                show: true,
                formatter: '{b}: {d}%'
            },
            data: [
                { value: 40, name: 'Документы' },
                { value: 25, name: 'Медиафайлы' },
                { value: 20, name: 'Системные данные' },
                { value: 15, name: 'Свободное пространство' }
            ]
        }
    ]
};

Стратегические лучшие практики

• Оптимизируйте соотношение внутреннего и внешнего радиуса:Поддерживайте внутренний радиус от 50% до 70% внешнего радиуса, чтобы сегменты были достаточно толстыми для удобного наведения, при этом сохраняя достаточное пространство в центре.
• Сознательно используйте центральное пространство:Используйте центральное пустое пространство для отображения общей суммы или выбранного показателя среза, вместо того чтобы загромождать периметр диаграммы дополнительными текстовыми полями.
• Ограничьте количество срезов:Ограничьте количество основных сегментов до 5 или 6. Если у вас много мелких категорий, объедините их в категорию «Другое», чтобы избежать слишком тонких, непонятных дуг.