Фиксированный диапазон и заполнение отсутствующих значений в Apache eCharts

Question

Я пытаюсь отобразить ежемесячные значения в eCharts в соответствии со следующими условиями:

• заполнить отсутствующие значения (например, отобразить пустую полосу для отсутствующих месяцев в пределах интервала)
• начало с указанного c месяц
• конец по заданному c месяц

Пример входных данных

let x = ['2019-10', '2020-02', '2020-03']
let y = [1403, 938, 1105]

Пример желаемого результата:

Я пробовал использовать следующие параметры для xAxis, но безрезультатно:

  xAxis: {
    type: 'time',
    axisLabel: {
      formatter: 'YYYY-MM',
    },
    min: '2019-05',
    max: '2020-05',
    data: x
  }

JSFiddle доступен здесь: http://jsfiddle.net/pewx61gz/3/

Answer 1

Echarts имеет несколько вариантов для достижения желаемого. Я не знаю всех возможных вариантов и предпочитаю самые простые и явно определенные, потому что, если вы хотите программно изменить поведение диаграммы, вы получите ад с зависимостями опций от чего-то, чего вы еще не знаете.

Я немного измените свой пример :

let x = ['2019-07-01','2019-08-01', '2019-10-01', '2020-02-01', '2020-03-01', '2020-04-01', '2020-05-01']
let y = ['-', '-', 1403, 938, 1105]

var myChart = echarts.init(document.getElementById('main'));

var option = {
  title: {
    text: 'ECharts'
  },
  tooltip: {},
  xAxis: {
    type: 'category',
    axisLabel: {
      //formatter: 'YYYY-MM',
      formatter: val => {
        var date = new Date(val).toISOString();
        return date.slice(0,7);
      },
    },
    //min: '2019-05',
    //max: '2020-05',
    data: x
  },
  yAxis: {},
  series: [{
    type: 'bar',
    data: y
  }]
}

myChart.setOption(option)

<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

PS '-' - это обычный способ сказать «нет данных».