1.安装echarts和wordcloud版本后，在package.json中查看2.效果图3.代码因为ui图中每个词云只给了两种随机颜色，所以准备随机颜色第一种颜色。在接口review之前，让后台把数据处理成这样的格式：constdata=[{name:'sleeping',value:1228},{name:'玩手机',value:981},{name:'eating',value:363},…],或者后台数据自己处理成这种格式1,//初始化两个词云initWord(){constchartDom1=document.getElementById('behaviorAnalysis')constchartDom2=document.getElementById('moodAnalysis')if(chartDom1&&chartDom2){constmyChart1=echarts.init(chartDom1)constmyChart2=echarts.init(chartDom2)constarr1=['rgb(135,206,201)','rgb(240,194,110)']arr2=['rgb(187,180,255)','rgb(223,141,131)']this.actionData=this.formatteData(this.actionData,arr1)this.moodData=this.formatteData(this.moodData,arr2)myChart1.setOption({系列:this.setWordOption(this.actionData)})myChart2.setOption({series:this.setWordOption(this.moodData)})}},2,//给data添加textStyle属性，并添加随机颜色formatteData(data,colorArray){//为数组的每一项添加textstyleconstcloudData=data.map(val=>({...val,//color不应该用normal,否则颜色不会生效textStyle:{//normal:{color:this.randomColor(colorArray)//}}}))//console.log('cloudData',this.cloudData)returncloudData},3.随机颜色函数randomColor(colorArray){//两种颜色的课堂行为分析constarr=colorArrayreturnarr[Math.round(Math.random()*(arr.length-1))]//随机选择一种颜色//如果颜色不固定，可以使用下面的随机颜色//return'rgb('+[//Math.round(Math.random()*160),//Math.round(Math.random()*160),//Math.round(Math.random()*160)//].join(',')+')'},4.配置函数setWordOption(words){//constdata=wordsconstdata=words//console.log(data,'setWordOptiondata----')constoption=[{type:'wordCloud',shape:'diamond',left:'center',top:'center',right:null,bottom:null,width:'100%',height:'90%',sizeRange:[18,30],rotationRange:[0,0],rotationStep:45,gridSize:25,drawOutOfBound:false,文本样式：{//normal:{fontFamily:'PingFangSC-Regular,PingFangSC',fontWeight:'normal'//},},data//这个数据是添加textStyle后的数组}]returnoption},//配置说明：shape：词云的形状，默认为circle，可选参数为cardioid,diamond,triangle-forward,triangle,starlefttoprightbottom：词云的位置，默认为centercenter。widthheight：词云的宽高，默认75%80%。sizeRange:词云的字体大小范围，默认为[12,60]，词云会根据提供的原始数据的值渲染文本的字体大小。以默认值为例，value的最小渲染值为12px，最大渲染值为60px，中间的值根据对应的值计算。rotationRangerotationStep:文字在词云中的角度。词云中的文字会在rotationRange范围内随机旋转。渲染的渐变就是rotationStep。值越小，词云中出现的角度越多。以上述参数为例，可能的旋转角度为-90-4504590。gridSize：词云中每个词之间的间距。drawOutOfBound：是否允许词云在边界外渲染，使用默认参数false即可，否则容易造成词重叠。textStyle:词云中文本的样式，normal是初始样式，emphasis是鼠标移到文本时的样式4.阅读官方文档在node_modules目录下阅读其官方readme配置文件：因为之前参考这篇文章：https://segmentfault.com/a/11...，textStyle有正常封装，官方文档没有，所以字体颜色不生效，去掉后才会生效它。
