Диаграмма тематического ручья: непрерывный категориальный поток и анализ тенденций

Когда отслеживается, как несколько непрерывных категорий изменяются со временем — например, объем продаж продукции по кварталам, изменение тематических тенденций в новостнойCoverage или паттерны потребления медиа — тоДиаграмма тематического ручья (специализированная форма streamgraph) обеспечивает интуитивное, визуально выразительное представление. В отличие от стандартных диаграмм с наложенными областями, которые привязаны к плоской базовой линии, диаграмма тематического ручья течет горизонтально вокруг центральной оси, создавая органичную, похожую на реку визуализацию, где отдельные потоки расширяются или сужаются в зависимости от количественных изменений значений.

Механика диаграмм тематического ручья

В Apache ECharts диаграммы тематического ручья используютtype: 'themeRiver'. Вместо использования традиционныхxAxis и yAxis, диаграмма работает с одной горизонтальнойsingleAxis с type: 'time' или type: 'value'. Элементы данных передаются в виде массивов кортежей в формате[time, value, categoryName].

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

Чтобы создать базовую диаграмму тематического ручья, настройтеsingleAxis типа'time', укажитеtype: 'themeRiver' в вашей серии и предоставьте свои наблюдения за потоком в массивеdata массив:

ECharts


Редактировать ECharts в VPasCode
ECharts Edit ECharts in VPasCode 
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            lineStyle: {
                color: 'rgba(0,0,0,0.2)',
                width: 1,
                type: 'solid'
            }
        }
    },
    legend: {
        data: ['Технологии', 'Мода', 'Спорт']
    },
    singleAxis: {
        top: 50,
        bottom: 50,
        axisTick: {},
        axisLabel: {},
        type: 'time',
        axisPointer: {
            animation: true,
            label: { show: true }
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                opacity: 0.5
            }
        }
    },
    series: [
        {
            type: 'themeRiver',
            emphasis: {
                itemStyle: {
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                }
            },
            data: [
                ['2026-01-01', 12, 'Технологии'],
                ['2026-02-01', 24, 'Технологии'],
                ['2026-03-01', 32, 'Технологии'],
                ['2026-04-01', 18, 'Технологии'],
                ['2026-01-01', 15, 'Мода'],
                ['2026-02-01', 18, 'Мода'],
                ['2026-03-01', 10, 'Мода'],
                ['2026-04-01', 25, 'Мода'],
                ['2026-01-01', 8, 'Спорт'],
                ['2026-02-01', 12, 'Спорт'],
                ['2026-03-01', 28, 'Спорт'],
                ['2026-04-01', 20, 'Спорт']
            ]
        }
    ]
};
Edit ECharts in VPasCode



Редактировать ECharts в VPasCode

 

Расширенные структурные методы

Графики тематических рек превосходно справляются с отслеживанием сложных многосоставных событий на протяжении длительных временных последовательностей с пользовательскими всплывающими подсказками и стилизованными палитрами категорий.

1. Многопотоковый объем медиа-содержимого

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

ECharts


Редактировать ECharts в VPasCode
ECharts Edit ECharts in VPasCode 
const categories = ['Статьи', 'Просмотры видео', 'Прослушивания подкастов', 'Социальные репосты'];

option = {
    title: {
        text: 'Потоки вовлеченности контента',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            lineStyle: {
                color: '#333',
                width: 1
            }
        }
    },
    legend: {
        data: categories,
        bottom: 10
    },
    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
    singleAxis: {
        top: '15%',
        bottom: '20%',
        type: 'time',
        axisLine: { lineStyle: { color: '#ccc' } },
        splitLine: { show: false }
    },
    series: [
        {
            type: 'themeRiver',
            label: {
                show: true,
                position: 'left',
                fontSize: 12
            },
            data: [
                ['2026-01-01', 120, 'Статьи'], ['2026-02-01', 200, 'Статьи'], ['2026-03-01', 150, 'Статьи'], ['2026-04-01', 80, 'Статьи'],
                ['2026-01-01', 60, 'Просмотры видео'], ['2026-02-01', 140, 'Просмотры видео'], ['2026-03-01', 220, 'Просмотры видео'], ['2026-04-01', 310, 'Просмотры видео'],
                ['2026-01-01', 30, 'Прослушивания подкастов'], ['2026-02-01', 45, 'Прослушивания подкастов'], ['2026-03-01', 90, 'Прослушивания подкастов'], ['2026-04-01', 110, 'Прослушивания подкастов'],
                ['2026-01-01', 180, 'Социальные репосты'], ['2026-02-01', 110, 'Социальные репосты'], ['2026-03-01', 70, 'Социальные репосты'], ['2026-04-01', 95, 'Социальные репосты']
            ]
        }
    ]
};
Edit ECharts in VPasCode



Редактировать ECharts в VPasCode

 

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

  • Правильно форматируйте кортежи данных: Каждый элемент в массиве data должен следовать точному порядку [дата, значение, названиеКатегории] чтобы ECharts корректно разделял и стекал непрерывные потоки.
  • Ограничьте количество категорий: Оставьте количество различных категорий от 3 до 7. Слишком много потоков делает отдельные полосы узкими и трудно отслеживаемыми на разных временных точках.
  • Используйте singleAxis размеры: Настройте top и bottom в singleAxis свойство для управления вертикальными отступами и предотвращения обрезки меток внешнего потока по краям контейнера.
Прокрутить вверх