График линии: отслеживание тенденций и непрерывные данные

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

Механика графиков линий

В Apache ECharts визуализация линий настраивается путем установки свойства серии type свойства на 'line'. Графики линий соединяют последовательно упорядоченные точки данных по непрерывной категориальной или временной шкале горизонтальной оси (xAxis), и отображают непрерывные числовые значения по вертикальной оси (yAxis).

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

Чтобы создать базовый график линии, определите свои непрерывные категории по оси X и сопоставьте ваш набор данных с объектом серии с параметром type: 'line':

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            data: [150, 230, 224, 218, 135, 147, 260]
        }
    ]
};

Расширенные структурные техники

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

1. Плавные кривые интерполяции

По умолчанию серии линий соединяют точки данных прямыми отрезками. Включение smooth: true применяет интерполяцию кубического сплайна для создания изогнутых, органичных линий по всему вашему набору данных:

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            data: [820, 932, 901, 934, 1290, 1330],
            lineStyle: {
                width: 3,
                color: '#5470c6'
            }
        }
    ]
};

2. Сравнение производительности по нескольким линиям

Сравните второстепенные метрики по одинаковым временным интервалам, указав несколько объектов линий внутри массиваseries массива:

option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Текущий период', 'Предыдущий период']
    },
    xAxis: {
        type: 'category',
        data: ['Неделя 1', 'Неделя 2', 'Неделя 3', 'Неделя 4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Текущий период',
            type: 'line',
            smooth: true,
            data: [320, 332, 301, 334],
            itemStyle: { color: '#5470c6' }
        },
        {
            name: 'Предыдущий период',
            type: 'line',
            smooth: true,
            data: [220, 182, 191, 234],
            itemStyle: { color: '#91cc75' }
        }
    ]
};

Настройка заливки области и точек данных

Линейные серии можно визуально улучшить с помощью тонких градиентных заливок фона и целевых маркеров данных, чтобы привлечь внимание к ключевым этапам.

1. Стилизация области линии

Добавление свойства areaStyleсвойство преобразует стандартную линейную диаграмму в область, заполняя область между линией и горизонтальной осью:

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false, // Выравнивание линии непосредственно по краям оси
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            data: [300, 280, 250, 590, 820, 710, 430],
            areaStyle: {
                color: 'rgba(84, 112, 198, 0.25)' // Мягкая заливка под линией
            },
            lineStyle: {
                width: 3,
                color: '#5470c6'
            },
            symbolSize: 8
        }
    ]
};

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

• Используйте boundaryGap: false для временных последовательностей: Удаление стандартных зазоров на краях непрерывных временных осей позволяет линии начинаться непосредственно на нулевом маргинале, обеспечивая чистое от края до края представление.
• Сохраняйте низкое количество линий: Избегайте отображения более чем 4–5 линий на одном холсте. Перегруженные линейные диаграммы («макаронные диаграммы») быстро становятся непонятными.
• События всплывающих подсказок осей Всегда настраивайте всплывающая подсказка: { trigger: 'axis' } чтобы пользователи могли наводить курсор на любую горизонтальную точку, чтобы одновременно просматривать точные значения по всем активным линейным рядам.