在vue项目中使用js2wordcloud实现自定义词云形状的效果
npm install js2wordcloudimport Js2WordCloud from ‘js2wordcloud’imageShape是生成词云的样子的图片。不支持base64为的图片。只能是个地址(注意图片的路径。)、list 就是tempData转换生成云词的数据~words是源数据根据数据的value确定生成词的大小。下面只是部分参数。想要了解更多参数or...
·
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);
}
},
更多推荐
已为社区贡献3条内容
所有评论(0)