每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > js
echarts中tooltip显示标题过长滚动
发布时间:2023-07-07 16:04:34 修改时间:2023-07-07 16:04:34 阅读:3077 评论: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 动画,你可能需要根据具体的样式和需求进行相应的调整,以获得所期望的滚动效果。
回复列表
关键字词:span,nbsp,style,font-size,1px,br
上一篇:css常用属性