ECharts 数据可视化 --词云图

最新推荐文章于 2024-06-17 17:18:14 发布

wqqstudy

最新推荐文章于 2024-06-17 17:18:14 发布

阅读量1.3k

点赞数 9

文章标签：信息可视化 echarts 前端

本文链接：https://blog.csdn.net/wqqstudy/article/details/138855224

版权

词云图（WordCloud）是对文本中出现频率较高的“关键词”予以视觉化的展现，

词云图可以过滤掉大量的低频低质的文本信息，使得浏览者只要一眼扫过文本就可领略文本的主旨。

词云图是一种非常好的图形展现方式，这种图形可以让人们对一个网页或者一篇文章进行语义分析，也就是分析同一篇文章中或者同一网页中关键词出现的频率。词云图对于产品排名、热点问题或舆情监测是十分有帮助的。

在最新版Echarts 4.ｘ官网中，已不再支持词云图功能，也找不到相应的API。

若需要进行词云图开发，则需要引入echarts.js文件，再通过命令引入echarts-wordcloud.min.js文件。

注意各个版本对应相应的echarts-wordcloud.min.js文件。

利用2019年10月全球编程语言的TIOBE排名数据展现其中的文本信息如图所示

<html>

<head>

</head>

<body>

//基于准备好的dom，初始化ECharts图表

var myChart = echarts.init(document.getElementById("main"));

var option = { //指定图表的配置项和数据

backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1

title: { //配置标题组件

text: '全球编程语言的TIOBE排名',

x: 'center', y: 15,

textStyle: {

color: 'green', fontSize: 22,

}

tooltip: { show: true }, //配置提示框组件

series: [{ //数据系列及其配置

name: '全球编程语言的TIOBE排名', //设置名称

type: 'wordCloud', //设置图表类型为字云图

sizeRange: [15, 100], //设置数据大小范围

size: ['80%', '80%'], //设置显示的字云图的大小

textRotation: [0, 45, 90, 135, -45, -90], //设置文字倾斜角度

textPadding: 3, //设置文字之间的间距

autoSize: { enable: true, minSize: 5 }, //设置文字的自动大小

textStyle: {

normal: {

color: function () {

return 'rgb(' + [

Math.round(Math.random() * 255),

Math.round(Math.random() * 255)

].join(',') + ')';

}

emphasis: {

shadowBlur: 26,

color: '#333',

shadowColor: '#ccc',

fontSize: 20

}

data: [ //设置具体的数据

{ name: "Java", value: 16884 }, { name: "C", value: 16180 },

{ name: "Python", value: 9089 }, { name: "C++", value: 6229 },

{ name: "C#", value: 3860 }, { name: "VB.NET", value: 3745 },

{ name: "Ruby", value: 1318 }, { name: "Assembly", value: 1307 },

{ name: "R", value: 1261 }, { name: "Delphi", value: 1046 },

{ name: "VB", value: 1234 }, { name: "Go", value: 1100 },

{ name: "Delphi", value: 1046 }, { name: "SAS", value: 915 },

{ name: "Perl", value: 1023 }, { name: "Matlab", value: 924 },

{ name: "PL/SQL", value: 822 }, { name: "D", value: 814 },

{ name: "Scheme", value: 193 }, { name: "COBEL", value: 447 },

{ name: "Scratch", value: 524 }, { name: "Dart", value: 448 },

{ name: "ABAP", value: 447 }, { name: "Scala", value: 442 },

{ name: "Fortran", value: 439 }, { name: "LiveCode", value: 169 },

{ name: "Lisp", value: 409 }, { name: "F#", value: 391 }, ,

{ name: "Rust", value: 356 }, { name: "Kotlin", value: 319 },

{ name: "Ada", value: 316 }, { name: "Logo", value: 261 },

{ name: "SQL", value: 1935 }, { name: "RPG", value: 274 },

{ name: "PHP", value: 1909 }, { name: "LabVIEW", value: 243 },

{ name: "Haskell", value: 209 }, { name: "Bash", value: 196 },

{ name: "ActionScript", value: 182 }, { name: "Transact-SQL", value: 569 },

{ name: "PowerShell", value: 178 }, { name: "VBScript", value: 203 },

{ name: "JavaScript", value: 2076 }, { name: "TypeScript", value: 304 },

{ name: "Objective-C", value: 1501 }, { name: "Prolog", value: 261 },

{ name: "Groovy", value: 1394 }, { name: "Swift", value: 1362 },

{ name: "Crystal", value: 168 }, { name: "Lua", value: 379 },

{ name: "Julia", value: 224 }

] //data结束

}] //series结束

}; //option结束

myChart.setOption(option); //为echarts对象加载数据

</script>

</body>

</html>

<html>

<head>
	<meta charset="utf-8">
	<title>4-11 词云图</title>
	<script  src='echarts.js'></script>
	<script  src='echarts-wordcloud.min.js'></script>
</head>

<body>
	<div id="main" style="width:700px;height: 500px;border: 1px solid black"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		var option = {  //指定图表的配置项和数据
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
			title: {  //配置标题组件
				text: '全球编程语言的TIOBE排名',
				x: 'center', y: 15,
				textStyle: {
					color: 'green', fontSize: 22,
				}
			},
			tooltip: { show: true },  //配置提示框组件
			series: [{  //数据系列及其配置
				name: '全球编程语言的TIOBE排名',  //设置名称
				type: 'wordCloud',  //设置图表类型为字云图
				sizeRange: [15, 100],  //设置数据大小范围
				size: ['80%', '80%'],  //设置显示的字云图的大小
				textRotation: [0, 45, 90, 135, -45, -90],  //设置文字倾斜角度
				textPadding: 3,  //设置文字之间的间距
				autoSize: { enable: true, minSize: 5 },  //设置文字的自动大小
				textStyle: {
					normal: {
						color: function () {
							return 'rgb(' + [
								Math.round(Math.random() * 255),
								Math.round(Math.random() * 255),
								Math.round(Math.random() * 255)
							].join(',') + ')';
						}
					},
					emphasis: {
						shadowBlur: 26,
						color: '#333',
						shadowColor: '#ccc',
						fontSize: 20
					}
				},
				data: [  //设置具体的数据
					{ name: "Java", value: 16884 }, { name: "C", value: 16180 },
					{ name: "Python", value: 9089 }, { name: "C++", value: 6229 },
					{ name: "C#", value: 3860 }, { name: "VB.NET", value: 3745 },
					{ name: "Ruby", value: 1318 }, { name: "Assembly", value: 1307 },
					{ name: "R", value: 1261 }, { name: "Delphi", value: 1046 },
					{ name: "VB", value: 1234 }, { name: "Go", value: 1100 },
					{ name: "Delphi", value: 1046 }, { name: "SAS", value: 915 },
					{ name: "Perl", value: 1023 }, { name: "Matlab", value: 924 },
					{ name: "PL/SQL", value: 822 }, { name: "D", value: 814 },
					{ name: "Scheme", value: 193 }, { name: "COBEL", value: 447 },
					{ name: "Scratch", value: 524 }, { name: "Dart", value: 448 },
					{ name: "ABAP", value: 447 }, { name: "Scala", value: 442 },
					{ name: "Fortran", value: 439 }, { name: "LiveCode", value: 169 },
					{ name: "Lisp", value: 409 }, { name: "F#", value: 391 }, ,
					{ name: "Rust", value: 356 }, { name: "Kotlin", value: 319 },
					{ name: "Ada", value: 316 }, { name: "Logo", value: 261 },
					{ name: "SQL", value: 1935 }, { name: "RPG", value: 274 },
					{ name: "PHP", value: 1909 }, { name: "LabVIEW", value: 243 },
					{ name: "Haskell", value: 209 }, { name: "Bash", value: 196 },
					{ name: "ActionScript", value: 182 }, { name: "Transact-SQL", value: 569 },
					{ name: "PowerShell", value: 178 }, { name: "VBScript", value: 203 },
					{ name: "JavaScript", value: 2076 }, { name: "TypeScript", value: 304 },
					{ name: "Objective-C", value: 1501 }, { name: "Prolog", value: 261 },
					{ name: "Groovy", value: 1394 }, { name: "Swift", value: 1362 },
					{ name: "Crystal", value: 168 }, { name: "Lua", value: 379 },
					{ name: "Julia", value: 224 }
				]  //data结束
			}]  //series结束
		};  //option结束
		myChart.setOption(option);  //为echarts对象加载数据 
	</script>
</body>

</html>