echarts折线图单点后面添加区域

Question

我需要在Echarts上渲染单个点后面的区域。 目前，仅当我将鼠标悬停在图表上的点上时，该区域才可见：

我已经对其余突出显示区域使用了 markArea 属性，但我不知道如何只用一个点来做到这一点。是否可以相对于 xAxis 上的日期以某种方式偏移 markAreas 的开始和结束？

我创建了一个 codesandbox 示例。 https://codesandbox.io/p/sandbox/bold-monad-y8r69h

Answer 1

这是一个小示例：

const data = [['2024-01-01',150], ['2024-01-02', 230], ['2024-01-03',224], ['2024-01-04',218], ['2024-01-05',135], ['2024-01-06',147], ['2024-01-07',260]];
const distance = halfDistanceToNeighbours(4);

option = {
  xAxis: {
    type: 'time',
  },
  yAxis: {},
  series: [
    {
      type: 'line',
      data: data,
      markArea: {
        data: [
          [{xAxis: distance[0]}, {xAxis: distance[1]}]
        ]
      }
    }
  ]
};

// this will not work for index 1 and -1
function halfDistanceToNeighbours(index) {
  const x = Date.parse(new Date(data[index][0]));
  const left = Date.parse(new Date(data[index - 1][0]));
  const right = Date.parse(new Date(data[index + 1][0]))
  return [x - ((x - left) / 2), x +((right - x) / 2)]
}

这能回答你的问题吗？