Boxplot

Boxplot (ящик с усами, box-and-whisker plot) — это статистическая диаграмма, которая отображает распределение числовых данных по группам (категориям) через ключевые показатели: минимум, квартиль 1 (Q1), медиану, квартиль 3 (Q3) и максимум. Boxplot наглядно показывает вариативность и разброс данных, выявляет выбросы и асимметрию распределения.

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

Анализ распределения значений внутри категорий (например, прибыли по годам, зарплат по отделам) Выявление выбросов, оценка симметрии и диапазона Сравнение вариативности между группами

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

Для каждой категории (например, год, отдел) строится отдельный ящик. Центральная линия — медиана (Q2/50-й перцентиль). Границы ящика — первый (Q1/25%) и третий (Q3/75%) квартиль. «Усы» — линии к минимуму и максимуму наблюдений (без выбросов). Отдельно могут отображаться выбросы (выходящие за пределы основной выборки).

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

Для каждой категории необходим массив из пяти значений: [min, Q1, median, Q3, max]. Категории (например, года, отделы) задаются на оси X.

Оператор данных:

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],
      min: colData[2][i],
      q1: colData[3][i],
      median: colData[4][i],
      q3: colData[5][i],
      max: colData[6][i]
    };
  }
  return data;
}

Оператор конфигураций:

function optionCal(data, chartConfig, chart) {
  var years = data.map(function(item) { return item.year; });

  // Для boxplot: [min, q1, median, q3, max] для каждого года
  var boxData = data.map(function(item) {
    return [
      Number(item.min),
      Number(item.q1),
      Number(item.median),
      Number(item.q3),
      Number(item.max)
    ];
  });

  var option = {
    title: { text: "Boxplot Chart Example", left: "center" },
    tooltip: { trigger: "item" },
    xAxis: { type: 'category', data: years },
    yAxis: { type: 'value' },
    series: [{
      name: 'Ящик с усами',
      type: 'boxplot',
      data: boxData
    }]
  };
  return option;
}