记录：前端echarts、echarts-wordcloud实现字符云、词云的效果
前⾔
需求：因为公司实现项⽬的过程中存在⼀个⽣成字符云效果的需求，所以查了⼀下当前使⽤echarts实现字符云、词云效果的⽅式并作记录归档。
版本：当前环境下实现字符云效果存在两个版本环境：
1、echarts4.x + echarts-wordcloud1.x版本环境下的实现⽅式
2、echarts5.x + echarts-wordcloud2.x版本环境下的实现⽅式
开始
⼀、echarts4.x + echarts-wordcloud1.x
1、实现效果
2、前置资源获取
intech:8040/echarts/echarts-4.3.1.min.js
intech:8040/echarts/echarts-wordcloud-1.1.3.min.js
3、实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>字符云、词云4</title>
<style>
*{
margin: 0;
padding: 0;
}
#chart{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="intech:8040/echarts/echarts-4.3.1.min.js"></script>
<script src="intech:8040/echarts/echarts-wordcloud-1.1.3.min.js"></script>
<script>
const data =[
{
name:'中国',
name:'中国',
value:10000,
},
{
name:'泰国',
value:600,
textStyle:{
normal:{
color:randomColor(),
},
},
},
{
name:'新加坡',
value:500,
textStyle:{
normal:{
color:randomColor(),
},
},
},
{
name:'印度尼西亚',
value:400,
textStyle:{
normal:{
color:randomColor(),
},
},
},
{
name:'⽇本',
value:100,
textStyle:{
normal:{
color:randomColor(),
},
},
},
{
name:'澳⼤利亚',
value:300,
textStyle:{
normal:{
color:randomColor(),
},
},
},
{
name:'韩国',
value:200,
textStyle:{
normal:{
color:randomColor(),
},
},
},
]
createChartHandler()
}
// ⽣成随机颜⾊
function randomColor(){
return(
'rgb('+
[
].join(',')+
')'
)
}
// 创建chart
function createChartHandler(){
let chart = echarts.init(document.querySelector('#chart'))        chart.setOption({
backgroundColor:'#fff',
backgroundColor:'#fff',
series:[
{
type:'wordCloud',
shape:'triangle',
left:'center',
top:'center',
right:null,
bottom:null,
width:'100%',
height:'100%',
sizeRange:[20,50],
rotationRange:[-90,90],
rotationStep:45,
gridSize:8,
drawOutOfBound:false,
textStyle:{
normal:{
fontFamily:'sans-serif',
fontWeight:'normal',
},
emphasis:{
shadowBlur:10,
shadowColor:randomColor(),// ⿏标移⼊的颜⾊
},
},
data,
},
],
})
}
// shape ：词云的形状，默认是 circle，可选的参数有cardioid 、 diamond 、 triangle-forward 、 triangle 、 star。
// left top right bottom ：词云的位置，默认是 center center。
// width height ：词云的宽⾼，默认是 75% 80%。
// sizeRange ：词云的⽂字字号范围，默认是[12, 60] ，词云会根据提供原始数据的 value 对⽂字的字号进⾏渲染。以默认值为例， value 最⼩的渲染为 12 px ，最⼤的渲染为 60px ，中间的值按⽐例计算相应的数值。
// rotationRange rotationStep ：词云中⽂字的⾓度，词云中的⽂字会随机的在 rotationRange 范围内旋转⾓度，渲染的梯度就是 rotationStep ，这个值越⼩，词云⾥出现的⾓度种类就越多。以上⾯参数为例，可能旋转的⾓度就是 -90 -45 0 45 90 。
// gridSize ：词云中每个词的间距。
// drawOutOfBound ：是否允许词云在边界外渲染，直接使⽤默认参数 false 就可以，否则容易造成词重叠。
// textStyle ：词云中⽂字的样式， normal 是初始的样式， emphasis 是⿏标移到⽂字上的样式。
</script>
</body>
</html>
⼆、echarts5.2.2 + echarts-wordcloud2.0.0
1、实现效果
2、前置资源获取
intech:8040/echarts/echarts-5.2.2.min.js
intech:8040/echarts/echarts-wordcloud-2.0.0.min.js
3、实现代码
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>字符云、词云5</title>
<style>
*{
margin: 0;
padding: 0;
}
#chart{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="intech:8040/echarts/echarts-5.2.2.min.js"></script>
<script src="intech:8040/echarts/echarts-wordcloud-2.0.0.min.js"></script> <script>
const data =[
{
name:'中国',
value:10000,
},
{
name:'泰国',
value:600,
},
{
name:'新加坡',
value:500,
},
{
name:'印度尼西亚',
value:400,
},
{
name:'⽇本',
textstyle
value:100,
},
{
name:'澳⼤利亚',
value:300,
},
{
name:'韩国',
value:200,
},
]
createChartHandler()
}
// ⽣成随机颜⾊
function randomColor(){
return(
'rgb('+
[
]
.join(',')+
')'
)
}
// 创建chart
function createChartHandler(){
let echartsWordcloud = echarts.ElementById('chart'))
echartsWordcloud.setOption({
backgroundColor:'#fff',
backgroundColor:'#fff',
series:[
{
type:'wordCloud',
shape:'triangle',
gridSize:10,
sizeRange:[20,50],
rotationRange:[-90,90],
rotationStep:45,
gridSize:8,
drawOutOfBound:false,
textStyle:{
fontFamily:'微软雅⿊',
color:function(){
return randomColor()
},
},
left:'center',
top:'center',
right:null,
bottom:null,
width:'100%',
height:'100%',
data,
},
],
})
//点击事件
<('click',function(e){
alert(e)
})
}
// shape ：词云的形状，默认是 circle，可选的参数有cardioid 、 diamond 、 triangle-forward 、 triangle 、 star。
// left top right bottom ：词云的位置，默认是 center center。
// width height ：词云的宽⾼，默认是 75% 80%。
// sizeRange ：词云的⽂字字号范围，默认是[12, 60] ，词云会根据提供原始数据的 value 对⽂字的字号进⾏渲染。以默认值为例， value 最⼩的渲染为 12 px ，最⼤的渲染为 60px ，中间的值按⽐例计算相应的数值。
// rotationRange rotationStep ：词云中⽂字的⾓度，词云中的⽂字会随机的在 rotationRange 范围内旋转⾓度，渲染的梯度就是 rotationStep ，这个值越⼩，词云⾥出现的⾓度种类就越多。以上⾯参数为例，可能旋转的⾓度就是 -90 -45 0 45 90 。
// gridSize ：词云中每个词的间距。
// drawOutOfBound ：是否允许词云在边界外渲染，直接使⽤默认参数 false 就可以，否则容易造成词重叠。
// textStyle ：词云中⽂字的样式， normal 是初始的样式， emphasis 是⿏标移到⽂字上的样式。
</script>
</body>
</html>
备注
归档记录以备后续翻阅使⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。