Мы уже разобрали лепестковые диаграммы, а сегодня поговорим о типе, который многие недооценивают. Диаграмма Дерево — или Treemap — это способ показать иерархию через вложенные прямоугольники. Площадь каждого прямоугольника пропорциональна значению, а вложенность отражает структуру: категория внутри категории, подкатегория внутри подкатегории. Это один из самых эффективных инструментов для работы с данными, у которых есть уровни: файловая система, бюджет проекта, структура трафика по регионам и устройствам, каталог товаров.

В мире IT и AI иерархические данные встречаются повсюду. Логи серверов разбиты по сервисам, сервисы — по эндпоинтам, эндпоинты — по статус-кодам. Модели машинного обучения имеют слои, слои — нейроны. И если вы хотите увидеть всю эту структуру одновременно, не теряя пропорций, Treemap — это то, что нужно. Сегодня я покажу, как он устроен, как его строить в Apache ECharts и на что обращать внимание, чтобы диаграмма действительно работала.

Главная мысль: Treemap — это не просто «красивые квадратики». Это инструмент, который показывает иерархию и пропорции одновременно. Если ваши данные имеют уровни — а в IT и AI они почти всегда имеют — этот тип диаграммы даст вам то, чего не даст ни круговая, ни столбчатая.

Что такое диаграмма Дерево и зачем она нужна

Представьте, что вам нужно показать структуру диска: папки, внутри них — другие папки, внутри — файлы. Круговая диаграмма здесь не справится: она покажет только один уровень. Столбчатая тоже: она не поддерживает вложенность. А Treemap умеет. Каждый прямоугольник — это узел дерева. Чем больше значение — тем больше площадь. Вложенные прямоугольники показывают, что один узел является частью другого.

В Apache ECharts Treemap реализован через series.type: 'treemap'. Данные передаются в виде древовидной структуры: у каждого узла есть name, value и опциональный массив children. Это может быть один корневой узел или массив корневых узлов. ECharts автоматически рассчитывает площади и располагает прямоугольники так, чтобы они заполнили доступное пространство максимально эффективно.

Вот как выглядит базовая структура данных:

  • Корневой узел — например, «Трафик сайта». Может не отображаться как отдельный прямоугольник, но задаёт контекст.
  • Дочерние узлы — «Cloudflare» и «Vercel». Их площади пропорциональны значениям.
  • Внуки — внутри Cloudflare: «США», «Узбекистан», «Нидерланды». Внутри Vercel: «Hong Kong», «San Francisco».
  • Глубина — сколько уровней показывать. По умолчанию ECharts показывает все, но это можно ограничить.

Ключевое преимущество Treemap перед другими диаграммами — плотность. Он использует всё доступное пространство, не оставляя пустот. Это делает его идеальным для дашбордов, где каждый пиксель на счету.

Строим Treemap: практика

Теперь — к практике. Я построил диаграмму Дерево на данных, которые уже знакомы читателям этого блога: трафик сайта devitpro.uz. Но на этот раз я сгруппировал его в иерархию. Корень — «Трафик», первый уровень — провайдеры (Cloudflare и Vercel), второй уровень — страны и регионы. Так вы увидите, как работает вложенность и как ECharts распределяет площади.

Диаграмма Дерево: иерархия трафика devitpro.uz
Корень — «Трафик сайта». Первый уровень — провайдеры. Второй уровень — регионы и страны. Площадь прямоугольника пропорциональна количеству запросов.
Наведите курсор на прямоугольник, чтобы увидеть точное значение и путь в иерархии. Кликните на узел, чтобы приблизить его.

Что здесь важно заметить? Во-первых, Cloudflare и Vercel делят пространство пропорционально: 64.87k против 51.79k запросов. Cloudflare чуть больше. Во-вторых, внутри Cloudflare видно, что США и Узбекистан — это основные страны, но есть и «хвост» из менее активных регионов. В-третьих, внутри Vercel Hong Kong доминирует с 29 043 запросами — это больше половины всего трафика Vercel. Treemap показывает это мгновенно: прямоугольник Hong Kong визуально больше всех остальных в своей группе.

Если бы мы использовали круговую диаграмму, нам пришлось бы делать две отдельные диаграммы — для Cloudflare и для Vercel. Treemap объединяет их в одном пространстве, сохраняя и пропорции, и иерархию.

Настройки, которые делают Treemap читаемым

Базовая диаграмма — это только начало. ECharts даёт много параметров, которые превращают Treemap из «просто квадратиков» в инструмент анализа. Вот что я использую чаще всего.

Метки и читаемость

Если прямоугольник слишком маленький, метка в нём не поместится. ECharts автоматически скрывает метки, которые не влезают, но это можно контролировать через label.show и label.overflow. Я обычно оставляю отображение меток только для достаточно крупных узлов, а остальные доступны через тултип. Это уменьшает визуальный шум.

Навигация и drill-down

Treemap в ECharts поддерживает зум и панорамирование через roam: true. А ещё — клик по узлу может приблизить его, если установить nodeClick: 'zoomToNode'. Это превращает статичную диаграмму в интерактивный исследовательский инструмент. Пользователь может «провалиться» в интересующую ветку и вернуться обратно через хлебные крошки (breadcrumb).

Для дашбордов с глубокой иерархией это критично. Представьте, что вы анализируете логи по сервисам. Кликнув на сервис, вы видите его эндпоинты. Кликнув на эндпоинт — статус-коды. Без drill-down Treemap остаётся плоской картинкой.

Цвет и визуальное кодирование

Цвет в Treemap может делать две вещи: различать категории или кодировать дополнительную метрику. В ECharts есть visualDimension и visualMin/visualMax, которые позволяют привязать цвет к значению, отличному от площади. Например, площадь — это количество запросов, а цвет — это доля ошибок (5xx). Тогда вы сразу видите не только «где много трафика», но и «где трафик проблемный».

Я в своей диаграмме использовал цвет для различия первого уровня: Cloudflare — голубой, Vercel — зелёный. Это помогает глазу быстрее разделять две большие группы. Но если бы у меня была метрика «ошибки», я бы обязательно закодировал её цветом.

Treemap в IT и AI: где это реально работает

Теория хороша, но давайте посмотрим на конкретные сценарии, где диаграмма Дерево даёт преимущество.

  • Анализ логов и мониторинг. Иерархия: сервис → эндпоинт → статус-код. Treemap покажет, какой сервис генерирует больше всего ошибок, и внутри него — какие именно коды доминируют. Это быстрее, чем листать таблицы.
  • Облачные расходы. Иерархия: провайдер → сервис → регион. Площадь — стоимость. Сразу видно, куда уходят деньги и какие регионы можно оптимизировать.
  • Структура ML-модели. Иерархия: модель → слои → параметры. Treemap покажет, какие слои занимают больше всего параметров, а значит — где основная вычислительная нагрузка.
  • Файловая система и хранилища. Классический кейс: папки → подпапки → файлы. Площадь — размер. Сразу видно, что занимает место.
  • Структура проекта. Модули → пакеты → классы. Площадь — строки кода или количество зависимостей. Полезно для рефакторинга.

В каждом из этих сценариев Treemap работает потому, что данные естественно иерархичны. Если иерархии нет, лучше использовать другие типы диаграмм. Но в IT и AI иерархия — это правило, а не исключение.

Ограничение, о котором стоит помнить: Treemap плохо читается, если узлов слишком много или они слишком маленькие. Старайтесь ограничивать глубину до 3–4 уровней и агрегировать мелкие категории в «Прочее». Иначе диаграмма превращается в кашу из микроскопических прямоугольников, которые невозможно различить.

Что я вынес из этого опыта

После работы с Treemap я стал смотреть на иерархические данные иначе. Раньше я автоматически тянулся к таблицам или столбчатым диаграммам, даже когда данные имели явные уровни. Теперь я сначала спрашиваю себя: «А есть ли здесь вложенность?» Если да — Treemap почти всегда даст более быстрое и глубокое понимание.

Вот несколько выводов, которые я записал для себя:

  • Treemap — для иерархий, а не для всего подряд. Если данные плоские, этот тип диаграммы только запутает.
  • Drill-down — это must-have. Без возможности «провалиться» в узел Treemap теряет половину своей ценности для исследования.
  • Цвет должен что-то значить. Либо различать категории, либо кодировать метрику. Случайные цвета — это потерянная возможность.
  • Ограничивайте глубину. 3–4 уровня — оптимум. Глубже — и диаграмма становится нечитаемой на мобильных экранах.
  • ECharts делает Treemap доступным. Без сложного кода вы получаете зум, drill-down, хлебные крошки и кастомизацию.
  • Иерархия — это язык IT. Сервисы, слои, модули, регионы — всё это деревья. Treemap говорит на этом языке.

Вердикт: стоит ли изучать диаграмму Дерево в 2026?

Определённо да. В мире, где сложность систем растёт экспоненциально, умение видеть структуру — это не роскошь, а необходимость. Treemap даёт именно это: одновременный обзор иерархии и пропорций. Вы не просто видите «что больше», вы видите «что больше внутри чего».

Для инженера, аналитика или исследователя данных это означает способность быстрее находить аномалии, понимать распределение ресурсов и объяснять сложные структуры другим. Для тех, кто работает с AI, Treemap — это ещё и способ визуализировать внутреннее устройство моделей: слои, параметры, активации.

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