echarts制作词云图

由于echarts官网没有词云图的配置，网上太多也不全，这里写一份关于词云图配置的文章，包括自定义图形，透明度等。

文章共3,474字 · 阅读需要大约12分钟

一键AI生成摘要，助你高效阅读

问答

ヾぁ影おジღ

3329人浏览 · 2023-11-21 10:18:51

ヾぁ影おジღ · 2023-11-21 10:18:51 发布

词云图

由于echarts官网没有词云图的配置，网上太多也不全，这里写一份关于词云图配置的文章，包括自定义图形，透明度等

文章目录

词云图
一、用到的网站
二、全部代码
三、结果展示

一、用到的网站

1、阿里巴巴图标库
2、图片转base64网站
3、echarts-wordcloud.min.js文件
4、echarts.min.js文件

二、全部代码

如果要使用自定义图案需要注意：
1、创建图片：var maskImage = new Image();
2、设置图片地址：maskImage.src = url;
3、载入配置：maskImage: maskImage;
4、待图片加载好以后再配置option：maskImage.onload

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<script src="./js/echarts-wordcloud.min.js"></script>
		<style>
			#main {
				width: 700px;
				height: 500px;
				box-shadow: 0 0 15px 3px aqua;
				margin: 100px auto 50px;
				border-radius: 15px;
			}
		</style>
	</head>
	<body>
		<div id="main"></div>
	</body>
	<script>
		var myChart = echarts.init(document.getElementById('main'));
		
		// 数据源
		var keyWords = [{
				name: '腾越街道',
				value: 1,
			},
			{
				name: '西源街道',
				value: 11,
			},
			{
				name: '固东镇',
				value: 12,
			},
			{
				name: '滇滩镇',
				value: 12,
			},
			{
				name: '猴桥镇',
				value: 18,
			},
			{
				name: '和顺镇',
				value: 13,
			},
			{
				name: '界头镇',
				value: 14,
			},
			{
				name: '曲石镇',
				value: 21,
			},
			{
				name: '明光镇',
				value: 18,
			},
			{
				name: '中和镇',
				value: 22,
			},
			{
				name: '芒棒镇',
				value: 26,
			},
			{
				name: '荷花镇',
				value: 24,
			},
			{
				name: '北海镇',
				value: 15,
			},
			{
				name: '清水镇',
				value: 18,
			},
			{
				name: '明光镇',
				value: 18,
			},
			{
				name: '中和镇',
				value: 22,
			},
			{
				name: '芒果镇',
				value: 26,
			},
			{
				name: '荷花镇',
				value: 24,
			},
			{
				name: '北海镇',
				value: 15,
			},
			{
				name: '清水镇',
				value: 18,
			},
			{
				name: '马站乡',
				value: 15,
			},
			{
				name: '五合乡',
				value: 10,
			},
			{
				name: '新华乡',
				value: 17,
			},
			{
				name: '蒲川乡',
				value: 15,
			},
			{
				name: '团田乡',
				value: 16,
			},
			{
				name: '北海乡',
				value: 1,
			},
			{
				name: '腾越镇',
				value: 6,
			},
			{
				name: '清水乡',
				value: 7,
			},
			{
				name: '马站乡',
				value: 15,
			},
			{
				name: '五合乡',
				value: 10,
			},
			{
				name: '新华乡',
				value: 17,
			},
			{
				name: '蒲川乡',
				value: 15,
			},
			{
				name: '团田乡',
				value: 16,
			},
			{
				name: '北海乡',
				value: 1,
			},
			{
				name: '腾越镇',
				value: 6,
			},
			{
				name: '清水乡',
				value: 7,
			}
		]
		
		// 求出最大值用来计算透明度
		var max = 0
		// 方法一
		for (let item of keyWords) {
			if(item.value > max){
				max = item.value
			}
		}
		// 方法二，利用map方法
		// max = Math.max(...keyWords.map(item=>item.value))
		
		// 自定义图片
		var maskImage = new Image();
		// 图片在iconfont上找，图片的黑色区域表示被填充
		maskImage.src = "data:image/png;base64,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"
		
		var option = {
			backgroundColor: '#fff',
			tooltip: {
				show: true
			},
			series: [{
				type: 'wordCloud',
				// 单词间隔的大小
				gridSize: 0, 
				// 字体大小范围
				sizeRange: [8, 38],
				// 文字旋转角度范围
				rotationRange: [-45, 45],
				// 自定义词云图形状
				maskImage: maskImage,
				// 形状有(circle)圆形(默认)、(cardioid)心形，(diamond)菱形，
				// (triangle-forward)三角形向前，(triangle)三角形，(pentagon)五边形和(star)星形。*/
				shape: 'star',
				textStyle: {
					color: function(e) {
						var a = [
							Math.round(Math.random() * 255),
							Math.round(Math.random() * 255),
							Math.round(Math.random() * 255),
							(e.data.value / max) < 0.3 ? 0.3 : e.data.value
						]
						return 'rgba(' + a.join(',') + ')'
					}
				},
				//设置显示区域的位置以及大小
				left: 'center',
				top: 'center',
				width: '100%',
				height: '100%',
				// 源数据
				data: keyWords,
				// 鼠标放上样式
				emphasis: {
					textStyle: {
						fontWeight: 'bold',
						color: '#ff0000',
					}
				}
			}]
		}

		// myChart.setOption(option)
		// 图片加载好以后再设置配置
		maskImage.onload = function() {
			myChart.setOption(option)
		}
	</script>
</html>