返回

纯粹前端实现词云展示

前端





前言
最近工作中做了几个数据可视化大屏项目，其中也有用到词云展示。以前做词云都是用python库来生成图片显示的，这次用了纯前端的实现（Ctrl+V真好用），同时顺手做个微博热搜的词云然后记录一下。

一、词云生成
词云生成，顾名思义就是将文字转化为云的形态。词云的生成原理其实很简单，就是将文字按照一定的规则排列，然后用不同的颜色和大小来表示不同文字的权重。

这里我使用了一个开源的词云生成库WordCloud，这个库非常容易使用，只需要几行代码就可以生成词云。

// 导入WordCloud库
import WordCloud from 'wordcloud';

// 创建一个词云对象
const wordCloud = new WordCloud();

// 设置词云的宽高
wordCloud.setWidth(500);
wordCloud.setHeight(300);

// 设置词云的配色方案
wordCloud.setColorScheme(['#ff0000', '#00ff00', '#0000ff']);

// 生成词云
wordCloud.generate('Hello World');

// 将词云渲染到页面上
document.getElementById('word-cloud').appendChild(wordCloud.getCanvas());

以上代码会生成一个简单的词云，如下所示：

[图片]

二、微博热搜词云
有了上面的基础，我们就可以来生成微博热搜词云了。首先，我们需要获取微博热搜词的数据。这里我使用了一个开源的微博热搜词爬虫库，这个库可以自动爬取微博热搜词的数据。

// 导入微博热搜词爬虫库
import WeiboHotSearch from 'weibo-hot-search';

// 创建一个微博热搜词爬虫对象
const weiboHotSearch = new WeiboHotSearch();

// 获取微博热搜词的数据
const hotSearchData = await weiboHotSearch.getHotSearch();

以上代码会获取到微博热搜词的数据，然后我们可以将这些数据传递给词云生成库，生成词云。

// 将微博热搜词的数据传递给词云生成库
wordCloud.setWords(hotSearchData);

// 生成词云
wordCloud.generate();

// 将词云渲染到页面上
document.getElementById('word-cloud').appendChild(wordCloud.getCanvas());

以上代码会生成一个微博热搜词云，如下所示：

[图片]

三、结语
以上就是纯前端实现词云展示的方法。这种方法简单易用，可以快速生成词云。同时，这种方法也可以用于生成其他类型的词云，例如新闻热词词云、商品评论词云等等。

附微博热搜词云Demo代码：

<!DOCTYPE html>
<html>
<head>
  
  <script src="wordcloud.js"></script>
  <script src="weibo-hot-search.js"></script>
</head>
<body>
  <div id="word-cloud"></div>

  <script>
    // 创建一个词云对象
    const wordCloud = new WordCloud();

    // 设置词云的宽高
    wordCloud.setWidth(500);
    wordCloud.setHeight(300);

    // 设置词云的配色方案
    wordCloud.setColorScheme(['#ff0000', '#00ff00', '#0000ff']);

    // 创建一个微博热搜词爬虫对象
    const weiboHotSearch = new WeiboHotSearch();

    // 获取微博热搜词的数据
    const hotSearchData = await weiboHotSearch.getHotSearch();

    // 将微博热搜词的数据传递给词云生成库
    wordCloud.setWords(hotSearchData);

    // 生成词云
    wordCloud.generate();

    // 将词云渲染到页面上
    document.getElementById('word-cloud').appendChild(wordCloud.getCanvas());
  </script>
</body>
</html>

希望本文对您有所帮助。