echarts中tooltip显示标题过长滚动

如果你想要在 tooltip 的 title 部分实现跑马灯效果，即不停地滚动显示内容，通过使用 CSS 动画和 JavaScript 来实现。

option = {
  // 其他配置项...
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      var title = params[0].name;
      var content = '';

      // 构造自定义 tooltip 的内容，可以使用 HTML 和 CSS
      content += '<div class="custom-tooltip">';
      content += '<div class="tooltip-title">' + title + '</div>';
      content += '<ul>';
      params.forEach(function (item) {
        content += '<li>' + item.seriesName + ': ' + item.value + '</li>';
      });
      content += '</ul>';
      content += '</div>';

      return content;
    },
    // 其他配置...
  },
  // 其他配置项...
};

// JavaScript 函数，实现 tooltip title 的跑马灯滚动效果
function startTooltipMarquee() {
  var tooltipTitle = document.querySelector('.tooltip-title');

  // 获取 title 的宽度
  var titleWidth = tooltipTitle.offsetWidth;

  // 创建 CSS 动画
  var keyframes = `
    @keyframes marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-${titleWidth}px); }
    }
  `;

  // 添加动画样式
  var styleSheet = document.createElement('style');
  styleSheet.innerHTML = keyframes;
  document.head.appendChild(styleSheet);

  // 添加动画类名
  tooltipTitle.classList.add('marquee');

  // 设置动画播放时长和循环模式
  tooltipTitle.style.animationDuration = (titleWidth / 50) + 's';
  tooltipTitle.style.animationIterationCount = 'infinite';
}

// 在 tooltip 显示后调用 JavaScript 函数开始跑马灯滚动效果
chart.on('showTip', function (params) {
  startTooltipMarquee();
});

说明：

元素的 class 属性中添加了一个名称为 tooltip-title 的类，并定义了一个名为 marquee 的 CSS 类，用于实现跑马灯滚动效果。

通过 JavaScript 函数 startTooltipMarquee()，我们动态地计算了 title 的宽度，并创建了一个 CSS 动画，将其应用到 title 元素上。然后，我们设置了动画的播放时长和循环模式，使其不停地滚动。

在 ECharts 图表对象上使用 showTip 事件，可以在 tooltip 显示后调用 startTooltipMarquee() 函数，以启动跑马灯滚动效果。

请注意，由于跑马灯滚动效果使用了 CSS 动画，你可能需要根据具体的样式和需求进行相应的调整，以获得所期望的滚动效果。