g2的提示框tooltip自动轮播

antv-G2绘制的柱状图中，如何让提示框tooltip能够自动轮播，且鼠标放上去后不影响正常的展示

参考GPT和自己的思路：

对于这个问题，可以使用 antv-G2 中的 tooltip 自定义，添加一个定时器来控制 tooltip 的显示和隐藏，实现自动轮播的效果。具体步骤如下：

  1. 修改 tooltip 的自定义函数，增加轮播效果的代码：
tooltip: {
  custom: true,
  containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
  itemTpl: '<div class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</div>',
  position: 'top',
  autoAdjust: true,
  triggerOn: 'mousemove',
  enterable: true,
  leaveDelay: 100,
  crosshairs: false,
  offset: 15,
  // 添加定时器控制显示和隐藏
  onShow: function onShow(ev) {
    var currentTarget = ev.currentTarget;
    var items = currentTarget.getElementsByClassName('g2-tooltip-list-item');
    var index = 0;
    var length = items.length;
    var timer = setInterval(function () {
      items[index].style.display = 'none';
      index = (index + 1) % length;
      items[index].style.display = '';
    }, 3000);
    currentTarget.__timer__ = timer;
  },
  onHide: function onHide(ev) {
    var currentTarget = ev.currentTarget;
    clearInterval(currentTarget.__timer__);
    currentTarget.__timer__ = null;
  }
}

  1. 在 onShow 和 onHide 事件中添加定时器控制 tooltip 的显示和隐藏，其中 onShow 事件中，定义了一个定时器，控制提示框中的每一项轮流显示和隐藏，实现自动轮播的效果。在 onHide 事件中，清除定时器，避免内存泄漏和冲突。

  2. 添加鼠标放上去后不影响正常展示的相关配置，例如在 tooltip 中添加 leaveDelay 配置项，增加在鼠标离开 tooltip 区域后显示延迟的时间，可以使得在鼠标移动过快时，不会频繁切换 tooltip 的显示内容。

这样，就可以实现 G2 中柱状图 tooltip 的自动轮播效果，并且不影响正常的展示。