词云 ”就是对网络文本中出现频率较高的“关键词”予以视觉上的突出,形成“关键词云层”或“关键词渲染”,从而过滤掉大量的文本信息,使浏览网页者只要一眼扫过文本就可以领略文本的主旨。

在日常开发工作中,需要文本分析或者是 数据可视化 方面,就离不开文本关键词的显示

而词云就是方便用户一眼就能看到高频词汇 或者热搜词汇 ,便于用户抓取到重要信息

  • 搜索热词的统计
  • 弹幕高频词的统计
  • 数据可视化
  • 下面我盘点下方法

    2D 词云

    1、 wordcloud2.js

    实现方法: 模块引入

    npm install wordcloud
    

    支持canvas渲染或者html 标签渲染

    官方例子: wordcloud2-js.timdream.org/#love

    2、echarts-wordcloud

    也是基于wordcloud2.js

    实现方法: 模块引入或者js引入

    npm install echarts
    npm install echarts-wordcloud
    
    import * as echarts from 'echarts';
    import 'echarts-wordcloud';
    

    官方例子 www.isqqw.com/#/echartsde…

    1、div+css+svg3dtagcloud

    按照svg3dtagcloud生成3D标签云 这篇文章,引入jquery和svg3dtagcloud.js

    支持字体属性的设置,fontColor设置字体颜色,fontSize设置字体大小,还有fontFamily,fontWeight,fontStyle,fontStretch

    主要实现: 

    在dom中添加svg标签,每一个词都用text标签实现,改变x、y坐标达到滚动

    2、TagCanvas 

    npm地址 www.npmjs.com/package/tag…

    现在也支持 npm 引入

    npm i tag-canvas
    

    引入方式:

    import tagCanvas from 'tag-canvas'
    

    image.png

    分类:
    前端
  •