wordcloud2.js是一款超级好用的的词云文字标签云插件-BFW插件库

wordcloud2.js是一款超级好用的的词云文字标签云插件

wordcloud2.js是一款超级好用的的词云文字标签云插件，支持各种自定义配置，api简洁好用。

安装

npm方式

npm i wordcloud -S

cdn方式

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/wordcloud2.js"></script>

使用方式：

npm

// html的canvas画布
<canvas id=“mycanvas” width="600" height="600"></canvas>

// 引入
import WordCloud from "wordcloud"

// 需要渲染的词
// 第二个参数值越大，显示的就越大
const list = [
["百年孤独", 35],
["活着", 25],
["悲惨世界", 15],
];

// 拿到canvas的dom
const canvas = document.getElementById('mycanvas')

// 初始化
WordCloud(canvas, {
// 词汇数组
list,
// 词云形状，默认圆形，还可以指定心形、正方形等
shape: "circle",
// 密集程度 数字越小越密集
gridSize: 6,
// 字体大小=原始大小*weightFactor
weightFactor: 1,
//最大字号
maxFontSize: 60,
//最小字号
minFontSize: 14,
//字体粗细
fontWeight: "normal",
// 字体
fontFamily: "Times, serif",
// 字体颜色 'random-dark' 或者 'random-light'
color: "random-light",
// 背景颜色
backgroundColor: "#10214f",
// 字体倾斜(旋转)概率，1代表总是倾斜(旋转)
rotateRatio: 1,
});

cdn

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/wordcloud2.js"></script>
    <style>
    </style>
</head>

<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script>
        // 拿到canvas的dom
    const canvas = document.getElementById('canvas')
    // 需要渲染的词
    // 第二个参数值越大，显示的就越大
    const list = [
      ["百年孤独", 35],
       ["百年孤独", 12],
         ["百年孤独", 2],
   
    ];
    
   // WordCloud(document.getElementById('my_canvas'), { list: list } );
    // 初始化
    WordCloud(canvas, {
      // 词汇数组
      list,
      // 词云形状，默认圆形，还可以指定心形、正方形等
      shape: "circle",
      // 密集程度 数字越小越密集
      gridSize: 6,
      // 字体大小=原始大小*weightFactor
      weightFactor: 1,
      //最大字号
      maxFontSize: 60,
      //最小字号
      minFontSize: 14,
      //字体粗细
      fontWeight: "normal", 
      // 字体
      fontFamily: "Times, serif", 
      // 字体颜色 'random-dark' 或者 'random-light'
      color: "random-light", 
      // 背景颜色
      backgroundColor: "#10214f", 
      // 字体倾斜(旋转)概率，1代表总是倾斜(旋转)
      rotateRatio: 1, 
    });
    </script>
</body>

</html>

github地址：https://github.com/timdream/wordcloud2.js