Apache ECharts 中自定义系列实现矩形中间触发Tooltip的技巧

在使用 Apache ECharts 进行数据可视化开发时，自定义系列(Custom Series)是一个非常强大的功能，它允许开发者完全控制图形的渲染逻辑。然而，在使用过程中，开发者可能会遇到一些与交互行为相关的挑战，比如 Tooltip 触发位置的问题。

问题背景

当开发者使用 ECharts 的自定义系列绘制矩形元素时，默认情况下，Tooltip 会在矩形的起始边缘触发。这与某些内置系列（如热力图）的行为不同，热力图的 Tooltip 通常会在矩形的中心位置触发。

解决方案

要实现 Tooltip 在矩形中心触发的效果，关键在于调整自定义系列中矩形的绘制逻辑。具体来说，需要在计算矩形位置时，将矩形的 x 坐标向左偏移半个宽度。

以下是实现这一效果的核心代码：

const height = api.size([0, 1])[1];
const width = end[0] - start[0];
const rectShape = echarts.graphic.clipRectByRect(
  {
    x: start[0] - width / 2,  // 关键点：x坐标减去宽度的一半
    y: start[1] - height / 2,
    width,
    height,
  },
  {
    x: params.coordSys.x!,
    y: params.coordSys.y!,
    width: params.coordSys.width!,
    height: params.coordSys.height!,
  }
);

实现原理

1. 坐标计算：首先计算矩形的宽度和高度
2. 位置调整：将矩形的x坐标减去宽度的一半，这样矩形的中心点就会落在原本的起始x坐标位置
3. 裁剪处理：使用clipRectByRect方法确保矩形不会超出坐标系范围

应用场景

这种技术特别适用于以下场景：

• 需要实现类似热力图效果的交互体验
• 自定义的柱状图或条形图系列
• 任何需要精确控制Tooltip触发位置的自定义图表

注意事项

1. 确保坐标系的计算正确，特别是在使用时间轴或类目轴时
2. 考虑边界情况，当矩形位于坐标系边缘时，偏移可能会导致部分图形被裁剪
3. 如果需要精确的交互体验，还需要检查相关的Tooltip配置

通过这种简单的坐标调整，开发者可以轻松实现与内置系列一致的交互体验，提升自定义图表的一致性和用户体验。