react中Js2WordCloud画词云

一、效果

二、源码

1、npm安装

npm install js2wordcloud --save

2、引入

import Js2WordCloud from 'js2wordcloud/dist/js2wordcloud.js'

3、使用

optionChart1=()=>{
        var self = this;
        // let div = echarts.init(document.getElementById('yjgb-box-1'));
        // var div = new window.Js2WordCloud(document.getElementById('yjgb-box-1'))//在index.html中引入时的写法
        var div = new Js2WordCloud(document.getElementById('yjgb-box-1'))
        // div.resize();
        let textList=[
            ['服务'], ['细致'], ['意识'], ['踏实'], ['责任感'], ['耐劳'],['自觉'], ['主动'], ['分享'], ['严谨'],
            ['热情'], ['上进心'],['及时'], ['经验'], ['刻苦'], ['沟通'], ['抗压'], ['精通'],['操作'],['熟练'],
            ['资格'], ['成本'],['英语'], ['提供'], ['分析'], ['开发'], ['反馈'], ['协助'],['使用'],['谈判']
        ]
        let cyList=[]
        for(let i=0;i<60;i++){
            cyList.push([textList[parseInt(Math.random()*textList.length)],Math.round(Math.random()*10)+1])
        }
        div.setOption({
            backgroundColor:'transparent',
            shape: 'circle',
            ellipticity: 1,//椭圆
            maxFontSize: 36,//最大字号
            minFontSize: 12,//最小字号
            tooltip: {
                show: true
            },
            list: cyList,
            color(word, weight, fontSize, distance, theta) { //自定义颜色、透明度
                if (fontSize>=12 && fontSize<=20) {
                    return 'rgb(29,227,250,0.3)';
                } else if(fontSize>20 && fontSize<=30){
                    return 'rgb(29,227,250,0.6)';
                }else if(fontSize>30 && fontSize<=36){
                    return 'rgb(29,227,250)';
                }
           },
        })
    }

三、参考

https://github.com/liangbizhi/js2wordcloud/tree/master/

四、有坑

法1：
create-react-app中，在index.html中引入js插件后，使用时，要加上window.xxx,否则会报“xxx is not defined”的错，具体原因还不是很清楚，可能是webpack配置的问题。
法2：
npm 安装、import 引入
这样就可以直接new Js2WordCloud了