[apache/echarts]当axisPointer触发时,如何在tooltip位置获取axisPointer位置信息

2023-12-18 699 views
4
这个功能解决了什么问题?

我们的业务中希望tooltip与axisPointer保持一个固定的距离,目前tooltip位置主要还是依赖鼠标的位置。

提议的 API 是什么样的?
tooltip: {
  position(..., trigger) {}, // trigger 可以为触发tooltip显示的一些相关信息,比如axisPointer,click事件等等
}

回答

1

或者有什么办法可以在图表实例上面获取到axisPointer的一些信息

3
position: (point, params, dom, rect, size) => {
  const { contentSize, viewSize } = size;
  const position = { top: (viewSize[1] - contentSize[1]) / 2 };

   if (point[0] <= viewSize[0] / 2) {
     position.left = point[0] + 10;
   } else {
     position.left = point[0] - 10 - contentSize[0];
   }

   return position;
},

目前我是这么做的,当axisPointer开启snap时,axisPointer的位置还是跟点的不太一样

2

@Ovilia我目前的写法应该就是应该Function回调函数的形式,有一个比较困惑的地方是,我了解了axisPointer的< /span>。有什么比较好的思路吗?和position数据,主要是它的topleft

6

第二个参数params可以获取到数据,可以尝试用echartsInstance.convertToPixel获取到数据点的位置,横向的应该就是 axisPointer 的位置。

7

@Ovilia 谢谢你的解答,你的解决方案解决了我的需求

position(point, params) {
  if (params.length) {
    const { axisIndex, axisValue } = params[0];

    instance.convertToPixel({ xAxisIndex: axisIndex }, axisValue); // axisPointer position x 
  }
}