Радиальная диаграмма датчика

Gauge — это круговой или полукруглый индикатор, который визуально отображает текущее значение показателя на шкале (например, процент выполнения плана, уровень KPI, отношение прибыли к продажам и т.п.). Такая диаграмма интуитивно понятна и используется для мониторинга ключевых метрик в реальном времени.

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

Отображение уровня выполнения плана в процентах Показ KPI, эффективности, процента использования ресурсов Быстрая оценка состояния процесса или бизнес-показателя

Структура данных:

Для построения достаточно одного значения, например, создадим вычисление SUM_AGG({Прибыль)/SUM_AGG(Продажи)*100, чтобы увидеть какую долю от выручки составляет чистая прибыль. Далее будем использовать это поле в echarts.

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

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] = {
      value: colData[0][i]
    };
  }
  return data;
}

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

javascript

function optionCal(data, chartConfig, chart) {
  var value = Math.round(data[0].value,2);

  var option = {
    title: { text: 'Gauge Chart Example', left: 'center' },
    tooltip: { formatter: '{a} <br/>{c}%' },
    series: [
      {
        name: 'Показатель',
        type: 'gauge',
        progress: { show: true },
        radius: '90%',
        center: ['50%', '60%'],
        detail: { formatter: '{value}%', fontSize: 14 },
        data: [{ value: value, name: 'Рентабельность' }],
        title: {fontSize: 14 }
      }
    ]
  };
  return option;
}