При представлении относительных долей или процентных соотношений одного статического итога, Круговая диаграмма является знакомым и интуитивно понятным выбором. Разделив круг на пропорциональные сегменты, круговые диаграммы позволяют зрителям быстро понять вклад отдельных компонентов в единое целое, например, распределение доли рынка, разделение предпочтений устройств или распределение расходов по категориям.
Механика круговых диаграмм
В отличие от декартовых диаграмм, использующих горизонтальные и вертикальные оси, круговые диаграммы напрямую отображают категориальные данные на радиальные углы в полярной системе координат. В Apache ECharts круговая диаграмма создается путем установки серии type на 'pie' и передачи массива объектов, где каждый элемент содержит числовое значение value и описательное name.
1. Основная настройка
Чтобы создать базовую круговую диаграмму, определите одну серию с type: 'pie' и передайте структурированный набор данных в массиве data массив:
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Источник доступа',
type: 'pie',
radius: '60%',
data: [
{ value: 1048, name: 'Поисковые системы' },
{ value: 735, name: 'Прямой' },
{ value: 580, name: 'Почта' },
{ value: 484, name: 'Объединенные рекламные баннеры' },
{ value: 300, name: 'Видеореклама' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Расширенные структурные техники
Круговые диаграммы можно настроить в виде колец (диаметральные диаграммы) или стилизовать с помощью пользовательских радиусов для акцентирования основных сегментов данных.
1. Вариант диаграммы-пончика
Установка радиус свойство в виде массива из двух значений (например, ['40%', '70%']) вырезает центр, чтобы создать чистую диаграмму с круглым отверстием. Это оставляет место в центре для пользовательских меток резюме:
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Тип устройства',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 8,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold'
}
},
data: [
{ value: 1048, name: 'ПК' },
{ value: 735, name: 'Мобильные' },
{ value: 580, name: 'Планшеты' },
{ value: 484, name: 'Другое' }
]
}
]
};
Тонкая настройка макета и стилей
Управление линиями вызова меток и границами сегментов позволяет сохранить читаемость круговых диаграмм даже при работе с небольшими значениями данных.
1. Настройка расстояния между сегментами и вызов меток
Применение ширины границ элементов и настройка внешних направляющих линий предотвращает наложение текста на соседние сегменты:
option = {
series: [
{
name: 'Доля рынка',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{ value: 40, name: 'Бренд A' },
{ value: 30, name: 'Бренд B' },
{ value: 15, name: 'Бренд C' },
{ value: 10, name: 'Бренд D' },
{ value: 5, name: 'Другие' }
],
label: {
formatter: '{b}: {d}%'
},
labelLine: {
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
Стратегические лучшие практики
- Ограничьте количество сегментов пятью или шестью:Слишком много маленьких сегментов делает круговую диаграмму трудной для чтения. Объедините незначительные значения в категорию «Другое», чтобы сохранить четкость фокуса.
- Сортируйте сегменты по размеру: Разместите самый большой сегмент, начиная с 12 часов, и расположите остальные сегменты последовательно по часовой стрелке, чтобы облегчить быстрый просмотр.
- Показывайте проценты непосредственно в подсказках или метках: Всегда включайте
{d}%в форматтерах меток или подсказок, чтобы зрители сразу видели соотношения частей, не прибегая к умственным вычислениям.