Echart：社区整理，词云图

燕双嘤

已于 2024-08-09 21:23:59 修改

阅读量5.8k

点赞数 5

分类专栏：日常工具文章标签： echarts

于 2019-03-06 13:22:38 首次发布

本文链接：https://blog.csdn.net/qq_42192693/article/details/88231341

版权

日常工具专栏收录该内容

8 篇文章 1 订阅

订阅专栏

1，社区整理

1.1，ECharts官网

地址：Examples - Apache ECharts

1.2，PPChart

地址：PPChart - 让图表更简单

1.3，ISQQW

地址：echarts图表集

1.4，Makeapie

地址：makeapie echarts社区图表可视化案例

2，绘图整理

2.1，词云图

<!DOCTYPE html>
<html class="x-admin-sm">
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport"
			content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
		<!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>
		<div id="main2" class="layui-col-sm12" style="height: 800px;width: 2500px;"></div>
		</div>
		<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
		<script src="https://oisanjavax.github.io/echarts-wordcloud/dist/echarts-wordcloud.min.js"></script>
		<script type="text/javascript">
			var myChart2 = echarts.init(document.getElementById('main2'));
			image1 ='图片Base64编码'
			var maskResource = new Image();
			maskResource.src = image1;
			option = {
				backgroundColor: '#ffffff',
				tooltip: {
					show: true
				},

				series: [{
					maskImage: maskResource,
					type: 'wordCloud',
					sizeRange: [20, 20],
					//textRotation: [0, 45, 90, -45],
					textStyle: {
						normal: {
							color: function() {
								return 'rgb(' + [
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160)
								].join(',') + ')';
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowColor: '#333'
						}
					},
					data: []
				}]
			};

			var JosnList = [];

			JosnList.push({
				"name": "协作",
				"value": "50"
			}, {
				"name": "共赢",
				"value": "48"
			}, {
				"name": "团队精神",
				"value": "45"
			}, {
				"name": "合作",
				"value": "43"
			},);
			option.series[0].data = JosnList;
			myChart2.setOption(option);
		</script>
	</body>
</html>