Apache ECharts没有在时间xAxis上显示visualMap片段

Question

我正在使用Apache ECharts 5.2.2，并尝试在时间轴上显示图表中的一些markAreas。

Apache ECharts提供了一些有用的示例来讨论一些特定的选项。面积片是一个例子，您可以在其中使用markArea建立自己的EChartsOption。

我试图根据我的需要调整这个示例，但是我未能使用Date对象使它在时间轴上运行。

如果将下面的EChartsOption粘贴到示例中，就会得到一个想法。

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定义了具有要突出显示的可视化区域的开始标记min和结束标记max的pieces。不幸的是，该区域不接受定义的Date对象的开始和结束，并突出显示整个图表。

我做错了什么让它在时间轴上运行？我在5.2.1版本中找到了一个用于字符串时间数据的错误报告。就连string也不起作用所以我想我做错了什么.有线索吗？

提前感谢！

Answer 1

我终于做到了。

min和max在pieces中的标记需要一个数字来正确地处理时间轴中的数据。因此，通过调用方法Date就可以给出getTime()对象的时间戳了。

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)'
  }
]

也许其他人也有同样的问题。Apache ECharts的文档有时不够精确。