在vue项目中使用js2wordcloud实现自定义词云形状的效果

最新推荐文章于 2025-10-24 12:38:30 发布

原创最新推荐文章于 2025-10-24 12:38:30 发布 · 5.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#词云图 #js2wordcloud #vue #自定义词云形状

本文介绍如何使用js2wordcloud库生成词云，包括设置词云形状、调整词大小及展示方式等参数配置。通过具体示例代码展示了如何将数据转换为词云所需的格式。

npm install js2wordcloud

import Js2WordCloud from ‘js2wordcloud’

imageShape 是生成词云的样子的图片。不支持base64为的图片。只能是个地址（注意图片的路径。）、
list 就是tempData转换生成云词的数据~
words是源数据根据数据的value确定生成词的大小。

下面只是部分参数。想要了解更多参数or参数意义自行百度or google js2wordcloud

how to use

renderCloud(words) {
        let tempData = words;
        let list = [];
        tempData.forEach(item => {
          let arr = [];
          arr.push(item.name);
          arr.push(Math.sqrt(item.value));
          list.push(arr);
         
        });
        let option = {
         imageShape: require('@/assets/images/xxx.png'), 
         // imageShape: '../static/wordcloud/xxx.png',  
         
          tooltip: {
            show: false,
            formatter: function (item) {
             console.log(item)
            }
          },
          list: list,
          shape: 'pentagon',
          ellipticity: 1
        }
        // console.log(list);
        let wc = new Js2WordCloud(document.getElementById('chart'))
        wc.setOption(option)
        window.onresize = function () {
          wc.setOption(option);
        }
      },