Treemap

Treemap — это прямоугольная диаграмма, которая визуализирует вложенные иерархии и относительные значения категорий. Каждый элемент иерархии отображается в виде прямоугольника. Размер каждого прямоугольника пропорционален значению, а более высокие уровни (категории, подкатегории) «разрезают» пространство на части для своих дочерних элементов.

Области применения:

Анализ структуры ассортимента, портфеля, бюджета Быстрая оценка вклада отдельных категорий и подкатегорий в общую сумму Отображение структуры файлов, проектов, департаментов и других иерархий с количественными атрибутами

Как работает:

Первый уровень (корневой) занимает всё доступное пространство диаграммы. Каждый следующий уровень иерархии вложен в рамки родителя. Размер прямоугольника пропорционален значению (value) для данной категории или элемента. Можно использовать цвет для визуализации дополнительных характеристик или категорий.

Структура данных:

Каждый элемент — объект с обязательным полем name, опциональным числовым value и (если есть уровни) массивом children. Вложенность (иерархия) достигается через вложенные children.

Для древовидной диаграммы оператор данных при одной мере остается неизменным. Ниже представлен код для оператора конфигураций.

function optionCal(data, chartConfig, chart) {
  var treeData = data.map(function(item) {
    return {
      name: item.name || item.product,
      value: Math.round(Number(item.value)) // округление до целого
    };
  });

  var option = {
    title: { text: 'Treemap Chart Example', left: 'center' },
    tooltip: {},
    series: [{
      name: 'Продажи',
      type: 'treemap',
      data: treeData,
      label: {
        show: true,
        formatter: '{b}\n{c}'
      }
    }]
  };
  return option;
}