前言
- 需求:因为公司实现项目的过程中存在一个生成字符云效果的需求,所以查找了一下当前使用echarts实现字符云、词云效果的方式并作记录归档。
- 版本:当前环境下实现字符云效果存在两个版本环境:
- 1、echarts4.x + echarts-wordcloud1.x版本环境下的实现方式
- 2、echarts5.x + echarts-wordcloud2.x版本环境下的实现方式
开始
一、echarts4.x + echarts-wordcloud1.x
-
1、实现效果
-
2、前置资源获取
- http://winserver.geointech.cn:8040/echarts/echarts-4.3.1.min.js
- http://winserver.geointech.cn: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="http://winserver.geointech.cn:8040/echarts/echarts-4.3.1.min.js"></script>
<script src="http://winserver.geointech.cn:8040/echarts/echarts-wordcloud-1.1.3.min.js"></script>
<script>
const data = [
{
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(),
},
},
},
]
window.onload = function () {
createChartHandler()
}
// 生成随机颜色
function randomColor() {
return (
'rgb(' +
[
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
].join(',') +
')'
)
}
// 创建chart
function createChartHandler() {
let chart = echarts.init(document.querySelector('#chart'))
chart.setOption({
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 最小的渲染为 12px ,最大的渲染为 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、前置资源获取
- http://winserver.geointech.cn:8040/echarts/echarts-5.2.2.min.js
- http://winserver.geointech.cn:8040/echarts/echarts-wordcloud-2.0.0.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>字符云、词云5</title>
<style>
* {
margin: 0;
padding: 0;
}
#chart {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="http://winserver.geointech.cn:8040/echarts/echarts-5.2.2.min.js"></script>
<script src="http://winserver.geointech.cn: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: '日本',
value: 100,
},
{
name: '澳大利亚',
value: 300,
},
{
name: '韩国',
value: 200,
},
]
window.onload = function () {
createChartHandler()
}
// 生成随机颜色
function randomColor() {
return (
'rgb(' +
[
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
].join(',') +
')'
)
}
// 创建chart
function createChartHandler() {
let echartsWordcloud = echarts.init(document.getElementById('chart'))
echartsWordcloud.setOption({
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,
},
],
})
//点击事件
echartsWordcloud.on('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 最小的渲染为 12px ,最大的渲染为 60px ,中间的值按比例计算相应的数值。
// rotationRange rotationStep :词云中文字的角度,词云中的文字会随机的在 rotationRange 范围内旋转角度,渲染的梯度就是 rotationStep ,这个值越小,词云里出现的角度种类就越多。以上面参数为例,可能旋转的角度就是 -90 -45 0 45 90 。
// gridSize :词云中每个词的间距。
// drawOutOfBound :是否允许词云在边界外渲染,直接使用默认参数 false 就可以,否则容易造成词重叠。
// textStyle :词云中文字的样式, normal 是初始的样式, emphasis 是鼠标移到文字上的样式。
</script>
</body>
</html>
备注
- 归档记录以备后续翻阅使用