【Echarts】使用echarts和echarts-wordcloud生成词云图

下页、再停留

已于 2023-12-27 15:54:36 修改

阅读量1.8k

点赞数 10

分类专栏：前端技术工具使用文章标签： echarts 前端 javascript

于 2023-12-26 09:00:42 首次发布

本文链接：https://blog.csdn.net/qq_25285531/article/details/135213152

版权

前端技术同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

工具使用

12 篇文章 0 订阅

订阅专栏

一、下载echarts和echarts-wordcloud

地址：https://download.csdn.net/download/qq_25285531/88663006

可直接下载放在项目中使用

二、词云数据

词云数据是对象的格式，可以从后端获取，这里以下面数据为例

$list3 = array(
	array('name' => '粉丝团', 'value' => '8'),
	array('name' => '发热我', 'value' => '15'),
	array('name' => '天', 'value' => '54'),
	array('name' => '人', 'value' => '83'),
	array('name' => '太热', 'value' => '15'),
	array('name' => 't热', 'value' => '11'),
	array('name' => '特瑞', 'value' => '65'),
	array('name' => '太热', 'value' => '65'),
	array('name' => '亚特人团', 'value' => '65'),
	array('name' => '东方化工', 'value' => '57'),
	array('name' => 'h规范', 'value' => '15'),
	array('name' => 'h规范', 'value' => '95'),
	array('name' => '粉丝团', 'value' => '90'),
	array('name' => '好地方', 'value' => '54'),
	array('name' => '给太热', 'value' => '70'),
	array('name' => '依托', 'value' => '50'),
	array('name' => 'y太热', 'value' => '58'),
	array('name' => '梵蒂冈', 'value' => '88'),
	array('name' => 'y他', 'value' => '11'),
	array('name' => '要让他', 'value' => '21'),
	array('name' => '和', 'value' => '92'),
	array('name' => '粉广泛的丝团', 'value' => '85'),
	array('name' => 'iuy', 'value' => '8'),
	array('name' => '广泛大概', 'value' => '58'),
	array('name' => 'g放到', 'value' => '75'),
	array('name' => '范德萨范德萨', 'value' => '55'),
	array('name' => 'g放到', 'value' => '12'),
	array('name' => 'r二维图', 'value' => '25'),
	array('name' => '吧v', 'value' => '15'),
	array('name' => '哦iu有', 'value' => '75'),
	array('name' => '哦iu有', 'value' => '65'),
	array('name' => '广泛的', 'value' => '5'),
	array('name' => 't热天坛人', 'value' => '55'),
	array('name' => '发大水了', 'value' => '15'),
	array('name' => 't热', 'value' => '5'),
	array('name' => '范德萨', 'value' => '25'),
	array('name' => '范德萨', 'value' => '55'),
	array('name' => 'rfew ', 'value' => '25'),
	array('name' => 'fgd ', 'value' => '35'),
	array('name' => 'hgf', 'value' => '95'),
	array('name' => '个人', 'value' => '85'),
	array('name' => 'y他', 'value' => '5'),
	array('name' => '范德萨', 'value' => '84'),
	array('name' => ' 也让', 'value' => '18'),
	array('name' => '范德萨', 'value' => '19'),
	array('name' => '烦烦烦', 'value' => '62'),
);

三、生成词云

可以根据属性去修改词云的配置项，以达到自己想要的效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		
		html, body, #main {
			width: 100%;
			height: 100%;
			margin: 0;
		}
		
	</style>
</head>
<body>
	<div class="content">
		<div class="main left" >
			<div id="main" style="width:640px;height:500px;"></div>
		</div>
	</div>  
	
	<script src="/newadmin/js/jquery-1.12.3.min.js" charset="utf-8"></script> 
	<script src="/newadmin/js/echarts.min.js" charset="utf-8"></script> 
	<script src="/newadmin/echarts-wordcloud/echarts-wordcloud.min.js"></script>
	<script>
        var myChart = echarts.init(document.getElementById('main'));

        // 异步加载数据
		$.get("xxxxxx").done(function (res) {
       		
       		var data = res.data  		//后端传回来的数据
			var option = {
				backgroundColor:'#193762',
				series: [ {
					type: 'wordCloud',
					sizeRange: [15, 30], // 用来调整字的大小范围
					rotationRange: [-30, 30],  每个词旋转的角度范围和旋转的步进
					gridSize: 10, // 用来调整词之间的距离
					shape: 'pentagon',// shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
					width: '100%' , 
					height: '100%', 
					left: 'center',
					top: 'center',
			        drawOutOfBound: false,//溢出是否显示
			        autoSize: {
			        	enable: true,
			        	minSize: 4
			        },
			        layoutAnimation: true,// 布局的时候是否有动画
			        keepAspect: true,
			        textStyle: {
			        	normal: {
			        		color: function(v) {
			        			// console.log(v.data)
			        			if (v.data.value < 60) {
			        				return '#FF5722';
			        			}else if (60 <= v.data.value && v.data.value < 80) {
			        				return '#FFB800';

			        			}else if (80 <= v.data.value &&  v.data.value <= 100) {
			        				return '#1E9FFF';

			        			}
			        		},
			        		fontWeight: '550'
			        	}
			        },
			        data: data
			    } ]
			};

			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}

			window.addEventListener('resize', myChart.resize);
        }
	</script>
</body>
</html>

四、效果图

不同的数值用不同的颜色标识