Apache ECharts 未按时显示 markArea xAxis

Question

I'm using Apache ECharts 5.2.2 and try to show some markAreas in the chart on a time axis.

Apache ECharts provide some useful examples to get into some specific options. Area Pieces is an example where you can set up your own EChartsOption with markArea .

I tried to adjust the example to my needs but I fail to get it running on time axis using Date object.

If you paste the following EChartsOption into the example, you get an idea.

option = {
  xAxis: {
    type: 'time', // changed from 'category'
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '30%']
  },
  visualMap: {
    type: 'piecewise',
    show: false,
    dimension: 0,
    seriesIndex: 0,
    pieces: [
      {
        min: new Date('2019-10-11'), // old tag was gt
        max: new Date('2019-10-13'), // old tag was lt
        color: 'rgba(0, 0, 180, 0.4)'
      },
      {
        min: new Date('2019-10-15'), // old tag was gt
        max: new Date('2019-10-17'), // old tag was lt
        color: 'rgba(0, 0, 180, 0.4)'
      }
    ]
  },
  series: [
    {
      type: 'line',
      smooth: 0.6,
      symbol: 'none',
      lineStyle: {
        color: '#5470C6',
        width: 5
      },
      markLine: {
        symbol: ['none', 'none'],
        label: { show: true },
        data: [{ xAxis: new Date('2019-10-11') }, { xAxis: new Date('2019-10-13') }, { xAxis: new Date('2019-10-15') }, { xAxis: new Date('2019-10-17') }]
      },
      areaStyle: {},
      data: [
        // changed from string
        [new Date('2019-10-10'), 200],
        [new Date('2019-10-11'), 560],
        [new Date('2019-10-12'), 750],
        [new Date('2019-10-13'), 580],
        [new Date('2019-10-14'), 250],
        [new Date('2019-10-15'), 300],
        [new Date('2019-10-16'), 450],
        [new Date('2019-10-17'), 300],
        [new Date('2019-10-18'), 100]
      ]
    }
  ]
};

visualMap defines pieces that has a begin tag min and an end tag max of the visualized area to highlight. Unfortunately, the area does not accept the beginning and ending of the defined Date object and highlights the whole chart.

What am I doing wrong to get it running on time axis? I found a bug report that is fixed in version 5.2.1 for string time data. Even string is not working so I guess, I do something wrong here... Any clue?

Thanks in advance!

Answer 1

I finally did it.

The tags min and max in pieces needs a number to handle data in time axis correctly. So, giving the timestamp of Date object by calling method getTime() is enough.

pieces: [
  {
    min: new Date('2019-10-11').getTime(),
    max: new Date('2019-10-13').getTime(),
    color: 'rgba(0, 0, 180, 0.4)'
  },
  {
    min: new Date('2019-10-15').getTime(),
    max: new Date('2019-10-17').getTime(),
    color: 'rgba(0, 0, 180, 0.4)'
  }
]

Maybe, someone else have the same problem. The documentation of Apache ECharts is sometimes not accurate enough.