【VUE】VUE项目中使用Js2WordCloud实现自定义形状的词云图效果

【VUE】VUE中词云图实现(Js2WordCloud 词云安装用法)

词云图一直用echarts和D3，昨天想在Vue里用一下，发现echarts-cloud的词云好像不太支持，Echarts官网里的词云DEMO也显示不出。办法总比问题多，懒惰让我放弃研究，直接用了以前用过的Js2WordCloud，在VUE里实现了下，其实比较强推这个，我觉得他的可以自定义Imagemask和可以设置时间慢慢渲染出来的效果都不错。

1.VUE工程下安装Js2WordCloud

在vue工程下（client下也可）：

npm install js2wordcloud 

妥了！

2.引入Js2WordCloud

直接在组件的Script下添加代码：

import Js2WordCloud from 'js2wordcloud'

3.配置与使用Js2WordCloud

我把它写在一个函数里renderCloud(words)
其中，words为传递进去的数据，列表形式.
list: [[‘谈笑风生’, 80], [‘谈笑风生’, 80], [‘谈笑风生’, 70]…]
一般情况下【单词】是长文本分词的结果，中文推Jieba。
基本配置下面够用了：

 renderCloud (words) {
      var wc = new Js2WordCloud(document.getElementById('chart2'))
      let list = words
      let option = {
        imageShape: require('@/assets/p1.jpg'),
        tooltip: {
          show: false,
          formatter: function (item) {
            console.log(item)
          }
        },
        list: list,
        shape: 'pentagon',
        ellipticity: 1
      }
      console.log(list)
      wc.setOption(option)
      window.onresize = function () {
        wc.setOption(option)
      }
    }

一个不是很详细的官方文档，例子还挺简单：
地址：https://www.npmjs.com/package/js2wordcloud

4.词云效果

数据：我爬了知乎某条关于“慕寒”的问题，处理并分词
Imageshape:找个张图
效果还可以~~看不出是一张飞机背景吧。。。捂脸

--------EchoZhang–2020/03/10-----这周研究下爬vikidata，vue暂停一下，搭了一个vue+flask的平台算是入门啦-----