Apache ECharts 未按时显示 markArea xAxis

Question

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

Apache ECharts 提供了一些有用的示例来了解某些特定选项。 Area Pieces是一个示例，您可以在其中使用markArea EChartsOption

我试图根据我的需要调整该示例，但我无法使用Date object 使其在时间轴上运行。

如果您将以下 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 object 的开头和结尾，并突出显示整个图表。

我做错了什么让它在时间轴上运行？ 我发现了一个在 5.2.1 版中针对字符串时间数据修复的错误报告。 甚至string都不起作用所以我想，我在这里做错了......有什么线索吗？

提前致谢！

Answer 1

我终于做到了。

pieces中的min和max标签需要一个数字才能正确处理时间轴上的数据。 因此，通过调用getTime()方法给出Date object 的时间戳就足够了。

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 的文档有时不够准确。