Apache EChartsJS折线图中如何获取插值中间点数据？

ECharts没有直接提供插值中间点的API，但可以通过监听鼠标事件+自定义线性插值计算实现需求，无需额外拟合线，步骤如下：

• 监听鼠标位置：通过mousemove事件跟踪鼠标在图表内的实时位置
• 转换坐标为数据值：用convertFromPixel方法把鼠标的像素坐标转成图表的X轴数值
• 定位相邻数据点：遍历系列数据，找到当前X值所在的左右两个原始数据点
• 计算插值Y值：用线性插值公式算出中间点的Y值，公式为：
  y = y1 + (y2 - y1) * (x - x1) / (x2 - x1)
  其中(x1,y1)、(x2,y2)是相邻的两个原始数据点，x是当前鼠标对应的X轴值
• 展示插值结果：可以通过自定义tooltip或者独立DOM元素显示计算出的插值数值

示例代码片段 #

// 假设图表实例为myChart，系列数据已定义
myChart.on('mousemove', function(params) {
  if (params.componentType === 'grid') {
    // 转换鼠标像素坐标为图表数据坐标
    const [currentX] = myChart.convertFromPixel({seriesIndex: 0}, [params.event.offsetX, params.event.offsetY]);
    const data = myChart.getOption().series[0].data;
    
    // 查找当前X值对应的左右相邻数据点
    let leftPoint, rightPoint;
    for (let i = 0; i < data.length - 1; i++) {
      const p1 = data[i];
      const p2 = data[i+1];
      if (currentX >= p1[0] && currentX <= p2[0]) {
        leftPoint = p1;
        rightPoint = p2;
        break;
      }
    }
    
    if (leftPoint && rightPoint) {
      // 线性插值计算Y值
      const [x1, y1] = leftPoint;
      const [x2, y2] = rightPoint;
      const interpolatedY = y1 + (y2 - y1) * (currentX - x1) / (x2 - x1);
      
      // 示例：在控制台输出插值结果，实际可替换为自定义tooltip展示
      console.log(`X轴值：${currentX.toFixed(1)}，插值Y值：${interpolatedY.toFixed(1)}`);
    }
  }
});

如果需要非线性插值（如二次、三次拟合），只需替换上述插值公式即可，核心逻辑保持一致。

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