html动态浮云效果,基于wordcloud2.js的动态词云

此前接触到的词云板块大都是python的wordcloud模块或者echarts的自浮云，echarts的词云也是基于wordcloud2.js做的扩展，而且之后将之根据三方库封装成了插件,所以在官方示例中也找不到相关案例

python中的词云源于WordCloud库，首先需要安装，大抵流程分为3步：

读取字符文件(其中可能需要设计jieba或者其他方法做处理)、配置词云属性、显示图例，其中不免涉及许多数据处理。

相比之下wordcloud2.js反而更容易上手，不需要安装库不需要太多逻辑处理，一套配置可以照搬，需要哪些倒时候加两行配置即可，数据方面以二维数组在画布上绘制的单词/文本列表，形式为[word，size]，例如： [[‘foo’，12]，[‘bar’，6]]，因为是基于前端的js渲染，不熟悉前端的话可能比较陌生，但是殊途同归嘛，总归是构造出一个二维数组，我们也可以用python构造传递过去直接使用，python构造列表谁还不会呢。

使用

WordCloud(elements, options);

elements是画布的DOM元素，类似document.getElementById('my_canvas')or $('#my_canvas')[0],options中设置数据以及相关配置。

Options属性

list： 数据列表，以2维数组形式[[单词，大小]，[单词，大小]]

fontFamily： 字体

fontWeight： 字体权重࿰