安装TagCloud库
npm i TagCloud -S
初始化
const container = '.tagcloud';
const options = {
useContainerInlineStyles: false,
radius: 200,
keep: true,
// 词云动画速度模式 slow, normal, fast
maxSpeed: 'normal',
initSpeed: 'slow',
};
texts = ['txt1', 'txt2']
tagCloud = TagCloud(container, texts, options);
修改文字颜色和大小
function RandomNumBoth(Min: number, Max: number) {
var Range = Max - Min;
var Rand = Math.random();
var num = Min + Math.round(Rand * Range); //四舍五入
return num;
}
const items: any = document.getElementsByClassName('tagcloud--item')
for (const item of items) {
item.style.color = ['#20ACC4', '#E79C28'][RandomNumBoth(0, 1)]
item.style.fontSize = ['12px', '16px', '20px', '28px'][RandomNumBoth(0, 1)]
}
给文字添加点击事件
let rootEl: any = document.querySelector('.tagcloud');
rootEl.addEventListener('click', function clickEventHandler(e: any) {
if (e.target.className === `tagcloud--item ${style.tagcloud_item}`) {
onChange?.({keyword: e.target.innerText})
}
});
当鼠标移上去时候暂停滚动,鼠标移除时候重新开始滚动
rootEl.addEventListener('mouseover', function clickEventHandler(e: any) {
if (e.target.className === `tagcloud--item ${style.tagcloud_item}`) {
tagCloud.pause()
}
});
rootEl.addEventListener('mouseout', function clickEventHandler(e: any) {
if (e.target.className === `tagcloud--item ${style.tagcloud_item}`) {
tagCloud.resume()
}
});