jQCloud 是一个基于 jQuery 的插件，用于生成美观且纯 HTML + CSS 的词云和标签云。使用这个插件需要引入两个文件，分别jQCloud 的 js 依赖与 css 依赖，但是由于其默认的css非常的简单，且预设的颜色不一定让用户满意，所以完全可以只引入js文件，将其css文件整段复制进自己的 style.css 里进行修改。以下是一个测试用例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQCloud Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.4/jqcloud.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.4/jqcloud-1.0.4.min.js"></script>
</head>
<body>
<div id="wordcloud" style="width: 600px; height: 400px;"></div>
<script>
$(document).ready(function() {
// 词频数据
var wordArray = [
{text: "JavaScript", weight: 10},
{text: "Python", weight: 8},
{text: "Java", weight: 7},
{text: "C++", weight: 6},
{text: "PHP", weight: 5},
{text: "Ruby", weight: 4},
{text: "Go", weight: 3},
{text: "Swift", weight: 2},
{text: "Kotlin", weight: 1}
];
// 使用 jQCloud 生成词云
$('#wordcloud').jQCloud(wordArray);
});
</script>
</body>
</html> 渲染造成的卡顿
当需要生成的词过多的时候，或者将jQCloud集成进页面，而页面有其他动画效果的时候，有时候会造成动画效果的卡顿。这个时候我们需要来调整一下它的设置参数：
width (数字)：词云容器元素的宽度。默认为原始宽度。
height (数字)：词云容器元素的高度。默认为原始高度。
center (对象)：词云中心的 x 和 y 坐标，相对于容器元素（例如：{x: 300, y: 150}）。默认为容器元素的中心。
afterCloudRender (函数)：整个云渲染完成后调用的回调函数。
delayedMode (布尔值)：如果为 true，单词将一个接一个地渲染，每个单词之间有微小延迟。这可以防止在渲染大量单词时浏览器冻结。如果为 false，云将一次性渲染。默认为 true，如果单词数量超过 50。
shape (字符串)：云的形状。默认为椭圆形，但可以设置为 "rectangular" 以绘制矩形形状的云。
removeOverflowing (布尔值)：如果为 true，会移除溢出容器的单词。默认为 true。比如上面提到的卡顿问题，我们可以将delayedMode设置为true来避免一次性抛出过多数据，如果想在渲染完成后给容器元素修改或增加类名，则需要用到afterCloudRender这个属性来设置回调函数。（回调这个词曾经困扰了博主很久，其实就是在让jqcloud把本职工作做完以后，再顺手调个属性，事情虽小，但由它来做，时间上才无缝）
回调函数的格式：
$('#wordcloud').jQCloud(hotwords, {
delayedMode:true,
height: 180,
weight: {
from: 0.8,
to: 0.9
},
afterCloudRender:function(){
$('#wordcloud').addClass('lazyloaded');
}
});这个回调函数的作用是，在渲染完成后，给元素添加一个名为 lazyloaded 的新类名。
