Echarts3之字符云WorldCloud

字符云功能现在已经不在Echarts的官方示例中了。通过官网里面也找不到对应的API和具体介绍。

如果需要进行开发的话需要单独引用专门的js文件。

下面是下载的百度云链接:worldcloud.js

https://pan.baidu.com/s/1o8JJzcA

正常的Echarts的js文件也是需要引入的。

然后是代码部分:

function world_cloud(cloud) {
	var option = {
		tooltip : {},
		series : [ {
			type : 'wordCloud',
			shape:'smooth',
			gridSize : 2,
			sizeRange : [ 50, 100 ],
			rotationRange : [ 46, 80 ],
			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 : cloud
		} ]
	};
	return option;
}

传入的cloud参数为字符云的数据,类型为json数组。

然后下面就是正常的Echarts代码。



要在Spring Boot中使用echarts实现标签,需要先引入echartsjs和css文件。可以通过在html文件中引入这些文件来实现。 接下来,在Spring Boot的控制器中,可以将标签的数据以JSON的形式传递给前端页面。下面是一个简单的示例代码: ``` @Controller public class TagCloudController { @GetMapping("/tagcloud") public String tagCloud(Model model) { List<Tag> tagList = new ArrayList<>(); tagList.add(new Tag("Java", 10)); tagList.add(new Tag("Spring", 8)); tagList.add(new Tag("MySQL", 6)); tagList.add(new Tag("HTML", 4)); tagList.add(new Tag("CSS", 3)); tagList.add(new Tag("JavaScript", 2)); Gson gson = new Gson(); String tagJson = gson.toJson(tagList); model.addAttribute("tagJson", tagJson); return "tagcloud"; } } ``` 在上面的代码中,我们创建了一个Tag类来表示每个标签及其权重。然后,在控制器的tagCloud()方法中,我们创建了一个包含标签信息的列表,并将它转换为JSON格式的字符串。最后,我们将这个字符串添加到Spring Boot模型中,以便在前端页面中使用。 在前端页面中,我们可以使用echarts的wordCloud图表类型来显示标签。下面是一个简单的示例代码: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tag Cloud</title> <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script> </head> <body> <div id="tagCloud" style="width: 800px;height:600px;"></div> <script type="text/javascript"> var tagJson = [[${tagJson}]]; var tagData = []; for(var i=0;i<tagJson.length;i++){ tagData.push({name:tagJson[i].name,value:tagJson[i].weight}); } var myChart = echarts.init(document.getElementById('tagCloud')); var option = { series: [{ type: 'wordCloud', shape: 'circle', left: 'center', top: 'center', width: '80%', height: '80%', right: null, bottom: null, sizeRange: [12, 60], rotationRange: [-90, 90], rotationStep: 45, gridSize: 8, drawOutOfBound: false, textStyle: { normal: { fontFamily: 'sans-serif', fontWeight: 'bold', color: function () { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } } }, data: tagData }] }; myChart.setOption(option); </script> </body> </html> ``` 在上面的代码中,我们首先将控制器中传递的JSON字符串转换为echarts需要的格式。然后,我们初始化了echarts实例并创建了一个wordCloud图表。最后,我们将转换后的数据添加到图表中,并设置了一些样式选项。 到此为止,我们就可以在Spring Boot应用程序中使用echarts实现标签了。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值