echars词云构建与配置

我开心就好o

已于 2022-06-27 19:16:44 修改

阅读量630

点赞数 1

CC 4.0 BY-SA版权

分类专栏：昨天不是才上过班吗?怎么今天又要上班? 文章标签： echarts javascript ecmascript 词云动态词云

于 2022-06-27 17:35:52 首次发布

本文链接：https://blog.csdn.net/qq_39051175/article/details/125488344

昨天不是才上过班吗?怎么今天又要上班? 专栏收录该内容

100 篇文章

订阅专栏

该博客介绍了如何利用Echarts库生成词云图。作者提供了详细的代码示例，包括如何配置选项以调整词云的样式，如背景颜色、文字大小、旋转范围等。他还分享了必要的js文件下载链接，以便读者能够实现自己的词云效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/e83b0efa303449559fcd64fa8a2ac86b.png

生成词云的代码:

// 词云需要的 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.1
					title: {
						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);
			}