echarts中tooltip显示标题过长滚动

发布时间：2023-07-07 16:04:34 修改时间：2023-07-07 16:04:34 阅读：3299 评论：0 0

如果你想要在 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 动画，你可能需要根据具体的样式和需求进行相应的调整，以获得所期望的滚动效果。

---