Apache ECharts 没有按时显示 visualMap 片段 xAxis

Question

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

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

我试图根据我的需要调整示例，但我无法使用 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 定义 pieces，它具有要突出显示的可视化区域的开始标记 min 和结束标记 max。不幸的是，该区域不接受定义的 Date 对象的开始和结束，并突出显示整个图表。

我在时间轴上运行做错了什么？我发现一个 bug report 在 5.2.1 版本中修复了字符串时间数据。甚至 string 也不起作用，所以我想，我在这里做错了什么……有什么线索吗？

提前致谢！

Answer 1

我终于做到了

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

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

Apache ECharts 没有按时显示 visualMap 片段 xAxis

Apache ECharts not showing visualMap pieces on time xAxis

javascript

echarts