如何在Apache ECharts中从zRender点击事件获取时间轴对应值

原代码仅适用于类目（category）类型X轴，time类型属于连续值轴，不存在预定义的data数组，因此读取xAxis[0].data会抛出异常。

解决方案 #

1. 点击位置网格范围判断 #

直接调用ECharts内置的containPixel方法，传入坐标系ID和像素坐标，返回布尔值即可判断坐标是否落在网格区域内。

2. 匹配最接近的数据集X轴值 #

convertFromPixel针对time类型X轴返回的第一个值就是点击位置对应的毫秒级时间戳，遍历你的原始数据集计算时间差，取差值最小的项即可。

完整可运行代码 #

// 假设你的原始数据集格式为 [{x: 时间戳, y: 数值}, ...]，存储在originData变量中
chart.getZr().on('click', function(params){
  const pointInPixel = [params.offsetX, params.offsetY];
  // 非网格区域点击直接终止逻辑
  if (!chart.containPixel('grid', pointInPixel)) return;

  // 转换像素坐标为图表数值坐标，time轴下返回第一个值为对应时间戳
  const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
  const clickTime = pointInGrid[0];

  // 遍历匹配最接近的数据集项
  let closestItem = null;
  let minTimeDiff = Infinity;
  originData.forEach(item => {
    const diff = Math.abs(item.x - clickTime);
    if (diff < minTimeDiff) {
      minTimeDiff = diff;
      closestItem = item;
    }
  })

  // 可按需获取closestItem的任意属性
  console.log('点击匹配到的最近数据项：', closestItem);
})

如果你通过ECharts的dataset配置管理数据，不需要额外维护originData变量，可通过chart.getModel().get('dataset')[0].source直接获取全量原始数据集。

内容的提问来源于stack exchange，提问作者Rob Shepherd