1. 首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. ECharts官网

用百度echarts实现词云效果

html页面代码:

<div id="cloud" style="width:300px; height:300px"></div>

<script src="js/echarts.min.js"></script>

<script src="js/echarts-wordcloud.min.js"></script>

<script src="js/cloud.js"></script>

//echarts.min.js和echarts-wordcloud.min.js百度自己下载

cloud.js代码如下:

var cloud = echarts.init(document.getElementById('cloud'));
let data = [{
		"name": "美食",
		"value": 20,
		"link":'http://www.baidu.com'
	},
	{
		"name": "网红店",
		"value": 20,
		"link":'http://www.ipkd.cn'
	},
	{
		"name": "表彰大会",
		"value": 20,
		"link":'http://echarts.ipkd.cn'
	},
	{
		"name": "打卡",
		"value": 19,
		"link":'http://echarts.ipkd.cn'
	},
	{
		"name": "十一长假",
		"value": 18,
		"link":'http://echarts.ipkd.cn'
	},
	{
		"name": "自由行",
		"value": 18,
		"link":'http://echarts.ipkd.cn'
	},
	{
		"name": "教师节",
		"value": 17,
		"link":'http://echarts.ipkd.cn'
	},
	{
		"name": "旅游景点",
		"value": 17,
		"link":'http://echarts.ipkd.cn'
	},
	{
		"name": "坡子街",
		"value": 17,
		"link":'http://echarts.ipkd.cn'
	},
	{
		"name": "体育",
		"value": 17,
		"link":'http://www.ipkd.com'
	},
	{
		"name": "综艺",
		"value": 17,
		"link":'http://echarts.ipkd.cn'
	},
	{
		"name": "商场",
		"value": 17,
		"link":'http://echarts.ipkd.cn'
	}
]
var option = {
	series: [{
		type: 'wordCloud',
		gridSize: 7,
		sizeRange: [15, 40],
		rotationRange: [-90, 90],
		// rotationStep: 45,
		shape: 'circle',
		width: '100%',
		height: '100%',
		drawOutOfBound: true,
		textStyle: {
			color: function() {
				return 'rgb(' + [
					Math.round(Math.random() * 250),
					Math.round(Math.random() * 250),
					Math.round(Math.random() * 250)
				].join(',') + ')';
			}
		},
		data: data
	}]
};
cloud.setOption(option);
cloud.on('click', function (params) {
	window.open(params.data.link)
});
点击展开全文

Echarts入门