一个简单的词云库
npm i simple-word-cloud注意：源码未打包直接发布，有需要请自行配置打包文件。
<div id="container"></div>import SimpleWordCloud from 'simple-word-cloud'
const wordCloud = new SimpleWordCloud({
el: document.getElementById('container') // 容器元素，大小不能为0
// 其他配置选项
})
wordCloud.render([
['文字', 12, {}] // ['文字', 权重， 配置选项]
// ...
])const wordCloud = new SimpleWordCloud(options)对象类型，可以传递以下选项：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| el | DOM Element | 容器元素，必填 | |
| minFontSize | Number | 12 | 文字最小的字号 |
| maxFontSize | Number | 40 | 文字最大的字号 |
| fontFamily | String | 微软雅黑, Microsoft YaHei | 字体 |
| fontWeight | String 、 number | 加粗 | |
| fontStyle | String | 斜体 | |
| space | Number | 0 | 文字之间的间距，相对于字号，即该值会和字号相乘得到最终的间距，一般设置为0-1之间的小数 |
| colorList | Array | 见下方 | 文字颜色列表 |
| rotateType | String | none | 旋转类型，none（无）、cross（交叉，即要么是无旋转，要么是-90度旋转）、oblique（倾斜，即-45度旋转）、random（随机。即-90度到90度之间），如果要针对某个文本 |
| fontSizeScale | Number | 1 / minFontSize | 计算时文字整体的缩小比例，用于加快计算速度，一般是0-1之间的小数，如果你没有非常清楚该配置的功能，那么请不要修改 |
| transition | String | all 0.5s ease | 文本元素过渡动画，css的transition属性 |
| smallWeightInCenter | Boolean | false | 按权重从小到大的顺序渲染，默认是按权重从大到小进行渲染 |
| onClick（v1.0.1+） | Function | 监听词云的点击事件。接收一个参数，代表被点击的词云数据。 |
[
'#326BFF',
'#5C27FE',
'#C165DD',
'#FACD68',
'#FC76B3',
'#1DE5E2',
'#B588F7',
'#08C792',
'#FF7B02',
'#3bc4c7',
'#3a9eea',
'#461e47',
'#ff4e69'
]words：数组，每一项也是一个数组，结构为：['文字','权重', '配置']，比如：
[
['文字', 12, {
rotate: 45
}]
]所有可用配置如下：
{
rotate,// Number，旋转角度
space,// 同实例选项的space
color,// 文字颜色，不设置则随机
fontFamily,// 字体
fontWeight,// 加粗
fontStyle// 斜体
}done：回调函数，接收一个参数，词云实例列表，你可以根据该列表进行渲染
仅计算词云位置，不包含渲染操作，所以你需要拿到计算完位置和大小后的词云实例列表来自行渲染。
计算并使用DOM方式直接渲染到容器内。
v1.0.1+
计算并使用Canvas方式直接渲染到容器内。
v1.0.1+
isDownload：是否直接触发下载，为false则返回data:URL数据
导出画布为图片，只有当使用renderUseCanvas方法渲染时才有效。
v1.0.1+
清除渲染的数据。
更新配置，options同实例化配置。不包含el选项。
当容器大小改变了需要调用该方法。此外，你需要自行再次调用run方法或render方法。
git clone https://github.com/wanglin2/simple-word-cloud.git
cd simple-word-cloud
npm i
npm link
cd ..
npm i
npm link simple-word-cloud
npm run dev