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;