forked from Gitlink/forgeplus-react
51 lines
1.2 KiB
JavaScript
51 lines
1.2 KiB
JavaScript
import React ,{ useEffect } from 'react';
|
|
import Js2WordCloud from 'js2wordcloud/dist/js2wordcloud.js'
|
|
|
|
function Cloud({data}) {
|
|
|
|
useEffect(()=>{
|
|
if(data){
|
|
optionChart1(data);
|
|
}
|
|
},[data])
|
|
|
|
function optionChart1(d){
|
|
var div = new Js2WordCloud(document.getElementById('cloud'))
|
|
let textList= d.categories;
|
|
let cyList=[]
|
|
for(let i=0;i<textList.length;i++){
|
|
cyList.push([textList[i],textList.length-i])
|
|
}
|
|
div.setOption({
|
|
backgroundColor:'transparent',
|
|
shape: 'circle',
|
|
ellipticity: 1,//椭圆
|
|
maxFontSize: 21,//最大字号
|
|
minFontSize: 16,//最小字号
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
list: cyList,
|
|
color(word, weight, fontSize, distance, theta) { //自定义颜色、透明度
|
|
switch(fontSize){
|
|
case 21:
|
|
return "#f8e367"
|
|
case 20:
|
|
return "#99dfff"
|
|
case 19:
|
|
return "#ff9e48"
|
|
case 18:
|
|
return "#5ea6ff"
|
|
case 17:
|
|
return "#58c0f0"
|
|
default:
|
|
return "#bcbcbc"
|
|
}
|
|
},
|
|
})
|
|
}
|
|
return(
|
|
<div id="cloud" style={{height:"120px"}}></div>
|
|
)
|
|
}
|
|
export default Cloud; |