При представлении категориальных метрик, которые выигрывают от немедленной визуальной ассоциации, Диаграмма с изображениямипредлагает творческую и увлекательную альтернативу стандартным прямоугольным столбцам. Заменяя сплошные цветные блоки на пользовательские векторные иконки, пути SVG или повторяющиеся символы, диаграммы с изображениями превращают обычные сводки данных в визуально описательные инфографики—например, человеческие иконки для статистики населения, формы транспортных средств для метрик движения или символы фруктов для подсчёта урожая.
Механика диаграмм с изображениями
В Apache ECharts диаграммы с изображениями используют type: 'pictorialBar'. Они работают на стандартных категориальных и числовых осях, как и обычные столбчатые диаграммы, но заменяют прямоугольные столбцы на настраиваемые графические элементы, определяемые свойством symbol (например, стандартные формы, URL-адреса изображений или строки путей SVG).
1. Основная настройка
Чтобы создать диаграмму с изображениями с несколькими рядами, настройте категориальные и числовые оси, определите type: 'pictorialBar' для всех рядов и настройте индивидуальные символы точек непосредственно в массиве data массиве:
option = {
title: {
text: "Урожай фермерского рынка",
left: 'center'
},
legend: {
data: ['Весна', 'Лето'],
top: '8%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
containLabel: true,
top: '18%',
left: 20
},
yAxis: {
data: ['Яблоки', 'Апельсины', 'Бананы', 'Виноград', 'Клубника'],
inverse: true,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
margin: 30,
fontSize: 14
}
},
xAxis: {
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
axisLine: { show: false }
},
series: [
{
name: 'Весна',
type: 'pictorialBar',
symbolRepeat: true,
symbolSize: ['80%', '60%'],
barCategoryGap: '40%',
data: [
{ value: 320, symbol: 'circle' },
{ value: 180, symbol: 'rect' },
{ value: 410, symbol: 'diamond' },
{ value: 95, symbol: 'triangle' },
{ value: 240, symbol: 'roundRect' }
]
},
{
name: 'Лето',
type: 'pictorialBar',
barGap: '10%',
symbolRepeat: true,
symbolSize: ['80%', '60%'],
data: [
{ value: 290, symbol: 'circle' },
{ value: 210, symbol: 'rect' },
{ value: 520, symbol: 'diamond' },
{ value: 130, symbol: 'triangle' },
{ value: 310, symbol: 'roundRect' }
]
}
]
};
Расширенные структурные техники
Диаграммы с изображениями могут последовательно повторять иконки для создания счётчиков инфографики на основе единиц или использовать маски для создания визуализаций уровня заполнения.
1. Шаблоны счётчиков единиц для одного ряда
Включите symbolRepeat: trueна одной числовой оси, чтобы отобразить горизонтальные стопки символов, основанные на единицах:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'value',
max: 10,
splitLine: { show: false }
},
yAxis: {
type: 'category',
data: ['Команда Альфа', 'Команда Бета', 'Команда Гамма'],
axisLine: { show: false },
axisTick: { show: false }
},
series: [
{
type: 'pictorialBar',
symbol: 'roundRect',
symbolRepeat: true,
symbolSize: [12, 30],
symbolMargin: 4,
data: [8, 5, 9],
itemStyle: {
color: '#91cc75'
}
}
]
};
Тонкая настройка макета и пользовательских фигур SVG
Использование пользовательских строк векторных SVG-путей позволяет отображать индивидуальные значки непосредственно внутри серии диаграммы.
1. Пользовательский векторный путь и наложение фона
Укажите пользовательскую строку SVG-пути в symbol и наложите полноформатный фоновый рисунок под ним, чтобы создать индикаторы типа «прогресс»:
const pathBattery = 'path://M16 4h-2V2a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z';
option = {
title: {
text: 'Уровень заряда устройств',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'none' }
},
grid: {
top: '20%',
bottom: '15%',
left: '10%',
right: '10%'
},
xAxis: {
type: 'category',
data: ['Узел A', 'Узел B', 'Узел C', 'Узел D'],
axisLine: { show: false },
axisTick: { show: false }
},
yAxis: {
type: 'value',
max: 100,
show: false
},
series: [
{
name: 'Оболочка аккумулятора',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: false,
itemStyle: {
color: '#e2e8f0' // Пустая оболочка фона
},
data: [100, 100, 100, 100],
z: 1
},
{
name: 'Уровень заряда',
type: 'pictorialBar',
symbol: pathBattery,
symbolSize: ['60%', '100%'],
symbolPosition: 'start',
symbolBoundingData: 100,
symbolClip: true, // Заполняется пропорционально значению
label: {
show: true,
position: 'top',
formatter: '{c}%',
fontSize: 14,
fontWeight: 'bold',
color: '#333'
},
itemStyle: {
color: '#22c55e' // Зелёное заполнение активного заряда
},
data: [85, 45, 92, 20],
z: 2
}
]
};
Стратегические лучшие практики
- Назначайте символы для каждого элемента, чтобы выделить разные категории: Передавайте отдельные
symbolопределения внутри объектов данных (например,{ value: 320, symbol: 'circle' }) для визуального различия строк без чисто цветовой зависимости. - Держите метафоры значков понятными: Выбирайте символы, которые напрямую соответствуют теме данных (например, силуэты пользователей для демографических данных или значки аккумуляторов для метрик мощности), чтобы визуализация была сразу понятна.
- Используйте
symbolClip: trueдля индикаторов заполнения: При отображении процентных метрик на фоне полностью заполненных областей установитеsymbolClip: trueв активной серии, чтобы пользовательская векторная форма заполнялась пропорционально.