潍坊寿光网站建设/站长之家字体

效果如下 , 细节可以在option中自行配制你需要的样式, 然后蓝色背景是我开发的项目本身自带的;
需要引入echarts-wordcloud.min.js 和 echarts.js
这两个js文件可以在我网盘里拿

链接: https://pan.baidu.com/s/12w3ZX-y8h3gWoFn2Xg3E2A?pwd=kvsr 
提取码: kvsr 

生成词云的代码:

// 词云需要的 data格式 是 :  [{name:'词语名字', value:100} ,{name:'词语名字2', value:50}  ,{name:'词语名字3', value:75} ]
function WordsCloud(value, id) {let myChart = echarts.init(document.getElementById(id));// 根据词云数量动态控制词云文字大小的范围let sizeArr = [24,36];if(value.length > 20){sizeArr  = [16,36];}else if(value.length < 10){sizeArr  = [36,50];}let option = {backgroundColor: '', //rgba设置透明度0.1title: {show: false,text: '词云', //标题x: 'center',textStyle: {fontSize: 12}},tooltip: {show: false},series: [{type: 'wordCloud', //类型为字符云shape: 'smooth', //平滑gridSize: 6, //网格尺寸size: ['50%', '50%'],sizeRange: sizeArr,rotationRange: [-45, 0, 45, 90], //旋转范围textStyle: {normal: {fontFamily: '微软雅黑',color: function() {return 'rgb(' +Math.round(Math.random() * 255) +', ' + Math.round(Math.random() * 255) +', ' + Math.round(Math.random() * 255) + ')'}},emphasis: {shadowBlur: 5, //阴影距离shadowColor: '#333' //阴影颜色}},left: 'center',top: 'center',right: null,bottom: null,width: '100%',drawOutOfBound: false,data: value //数据}]};myChart.setOption(option);}