Линейные графики

Линейные графики#

Line chart (линейная диаграмма) — это график, который отображает изменения значения одной или нескольких переменных по оси времени (или другой последовательности), соединяя соседние точки линиями. Основное назначение — показать тренды, динамику, последовательные изменения данных.

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

Анализ и визуализация временных рядов (продажи по месяцам, посещаемость по дням, температура по времени и пр.) Поиск тенденций и трендов, выявление сезонности, аномалий и переходных моментов Сравнение динамики нескольких объектов, показателей или групп на одном графике

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

Ось X — обычно представляет время, категории или порядковый номер. Ось Y — числовое значение. Каждая точка соответствует своему значению в последовательности, соседние точки соединены линией. Можно отображать сразу несколько серий (несколько линий).

Структура данных для ECharts:

Массив значений X (категории, временные метки). Массив чисел Y для каждой серии (series.data).

Базовый линейный график#

Для изменения визуализации будем менять оператор конфигурации. Сначала разделим входные данные в функции optionCall на categories и values.

javascript

var categories = data.map(function(item) { return item.name; });
var values = data.map(function(item) { return item.value; })

Изменим код, добавив значения по осям и изменив тип графика. Теперь оператор конфигурации будет выглядеть так:

javascript

function optionCal(data, chartConfig, chart) {
  var categories = data.map(function(item) { return item.name; });
  var values = data.map(function(item) { return item.value; });
  var option = {
    title: {
      text: "Line Chart Example",
      left: "center"
    },
    tooltip: {
      trigger: "item"
    },
    xAxis: {
      type: 'category',
      data: categories
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: "Прибыль",
      type: "line",
      data: values
    }]
  };
  return option;
}

Измененный график показан на рисунке ниже.

Сглаженный линейный график#

Для сглаженного график в series добавьте smooth: true.

Базовый график областей#

Для графика областей добавьте в series areaStyle: {}. Для того, чтобы слева и справа на горизонтальной оси не было свободного места, добавьте в xAxis свойство boundaryGap: false.

Линейный график с несколькими кривыми#

Для нескольких кривых нужно внести изменения в оператор данных, добавив третье поле.

javascript

function dataCal(originData) {
  var dataModels = originData.dataModels;
  var colData = dataModels[0].colData;
  var data = [];

  for (var i = 0; i < colData[0].length; i++) {
    data[i] = {
      year: colData[0][i],
      product: colData[1][i],
      value: colData[2][i]
    };
  }
  return data;
}

Теперь можно использовать название продукта на визуализации. Код для оператора конфигураций представлен ниже.

javascript

function optionCal(data, chartConfig, chart) {
  // Собираем все года (оси X)
  var years = [];
  data.forEach(function(item) {
    if (years.indexOf(item.year) === -1) years.push(item.year);
  });

  // Получаем уникальные продукты (оси серии/линии)
  var products = [];
  data.forEach(function(item) {
    if (products.indexOf(item.product) === -1) products.push(item.product);
  });

  // Формируем series
  var series = products.map(function(product) {
    var values = years.map(function(year) {
      var found = data.find(function(item) {
        return item.year === year && item.product === product;
      });
      return found ? found.value : null;
    });
    return {
      name: product,
      type: "line",
      data: values
    };
  });

  var option = {
    title: { text: "Stacked Line Chart Example", left: "center" },
    tooltip: { trigger: "axis" },
    legend: { data: products, top: 20},
    xAxis: { type: 'category', data: years },
    yAxis: { type: 'value' },
    series: series
  };
  return option;
}