vue项目中生成特定形状的词云图——js2wordcloud

荻野泽溪

于 2020-06-10 16:35:45 发布

阅读量2.9k

点赞数 3

分类专栏： vue

本文链接：https://blog.csdn.net/MISS_CJL/article/details/106667098

版权

本文展示了如何在Vue项目中利用js2wordcloud库生成特定形状的词云图，包括安装依赖、HTML布局、CSS样式和JS代码的详细步骤，以及关键属性的说明。

摘要由CSDN通过智能技术生成

效果图：

安装依赖：

npm install js2wordcloud

html代码

<div class="word-cloud-chart">
 <div id="chart2" class="word-cloud-bg" >
 </div>
</div>

css样式

.word-cloud-bg{
    width: 600px;
    height: 500px;
    background: url('../../assets/view/Dashboard_WordCloud_bg.png');
    background-size: 100% 100%;
}

js代码块

import Js2WordCloud from 'js2wordcloud'

// 生成词云
wordCloud () {
      var wc = new Js2WordCloud(document.getElementById('chart2'))
      let list = []
      for (let i = 1; i< 80; i++){
        list.push([`小白${i}`, 6 * i - 4])
      }
      let option = {