词云Vue版
2021/11/29·2 views
有两种实现方案
echarts
快速上手 - Handbook - Apache ECharts
echarts-wordcloud - npm (npmjs.com)
shell
npm install echarts
npm install echarts-wordcloud # 注意：echarts如果是5那个这个使用2版本
vue
<template>
<div ref="wordCloud" id="word-cloud"></div>
</template><script>
import 'echarts-wordcloud';
import eCharts from "echarts";
export default {
name: 'word-cloud',
props: ["words"],
watch: {
words() {
this.init()
},
},
methods: {
init() {
let myChart = eCharts.init(this.$refs.wordCloud)
myChart.setOption({
backgroundColor: '#fff', // canvas背景颜色
title: {
textStyle: {
fontSize: 14,
color: '#3B3E41',
fontWeight: 'normal'
}
},
series: [
{
type: 'wordCloud',
left: '-5%', // X轴偏移量
top: '20%', // Y轴偏移量
width: '100%', // canvas宽度大小
height: '100%', // canvas高度大小
sizeRange: [12, 50], // 词典字体大小范围配置
rotationRange: [0, 0], // 词典字体旋转角度配置，默认不旋转
gridSize: 25, // 词典字体间距配置
layoutAnimation: true, // 为false词典过度会阻塞
textStyle: { // 词典样式配置
normal: {
color() {
// 随机颜色
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
}
},
data: this.words,
}
]
})
}
}
}
</script><style scoped lang="less">
#word-cloud {
height: 300px;
}
</style>svg
2.词云-vue-wordcloud组件封装 - 掘金 (juejin.cn)
vue
<template>
<div class="container">
<svg style="background-color: white; border-radius: 50%;" :width="width" :height="height" ref="test">
<a class="fontA" :href="tag.href" v-for="(tag, index) in tags" :key="tag.id">
<text :x="tag.x" :y="tag.y" :fill="colors[index]" :font-size="tag.size" :fill-opacity="(400 + tag.z) / 600">
{{ tag.label }}
<title>{{ tag.value }}</title>
</text>
</a>
</svg>
</div>
</template><script>
export default {
name: "word-cloud",
props: ['words'],
//数据，宽，高，半径，半径一般位宽高的一半。
data() {
return {
width: 500, //svg宽度
height: 500, //svg高度
tagsNum: 0, //标签数量
RADIUS: 250, //球的半径
speedX: Math.PI / 360 / 1.5, //球一帧绕x轴旋转的角度
speedY: Math.PI / 360 / 1.5, //球-帧绕y轴旋转的角度
tags: [],
timer: null,
minSize: 14,
maxSize: 44,
colors: [], //存储颜色
};
},
computed: {
CX() {
//球心x坐标
return this.width / 2;
},
CY() {
//球心y坐标
return this.height / 2;
},
},
mounted() {
this.timer = setInterval(() => {
this.rotateX(this.speedX);
this.rotateY(this.speedY);
}, 17);
},
watch: {
words() {
//初始化标签位置
let tags = [];
this.tagsNum = this.words.length;
this.changeColors(this.tagsNum);
for (let i = 0; i < this.words.length; i++) {
let tag = {};
let k = -1 + (2 * (i + 1) - 1) / this.tagsNum;
let a = Math.acos(k);
let b = a * Math.sqrt(this.tagsNum * Math.PI); //计算标签相对于球心的角度
tag.label = this.words[i].label;
tag.value = this.words[i].value;
let size = this.minSize + parseInt((this.words[i].weight / 100) * 20)
tag.size = size > this.maxSize ? this.maxSize : size;
tag.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b); //根据标签角度求出标签的x,y,z坐标
tag.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b);
tag.z = this.RADIUS * Math.cos(a);
tags.push(tag);
}
this.tags = tags;
},
},
methods: {
// 纵向
rotateX(angleX) {
const cos = Math.cos(angleX);
const sin = Math.sin(angleX);
for (let tag of this.tags) {
const y1 = (tag.y - this.CY) * cos - tag.z * sin + this.CY;
const z1 = tag.z * cos + (tag.y - this.CY) * sin;
tag.y = y1;
tag.z = z1;
}
},
// 横向
rotateY(angleY) {
const cos = Math.cos(angleY);
const sin = Math.sin(angleY);
for (let tag of this.tags) {
const x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;
const z1 = tag.z * cos + (tag.x - this.CX) * sin;
tag.x = x1;
tag.z = z1;
}
},
// 监听鼠标方向
listener(e) {
var x = e.clientX - this.CX;
var y = e.clientY - this.CY;
if (x * 0.0001 > 0 && y * 0.0001 > 0) {
this.speedX = -Math.min(this.RADIUS * 0.00002, x * 0.0002);
this.speedY = -Math.min(this.RADIUS * 0.00002, y * 0.0002);
} else if (x * 0.0001 < 0 && y * 0.0001 < 0) {
this.speedX = -Math.max(-this.RADIUS * 0.00002, x * 0.0002);
this.speedY = -Math.max(-this.RADIUS * 0.00002, y * 0.0002);
} else {
this.speedX =
x * 0.0001 > 0
? Math.min(this.RADIUS * 0.00002, x * 0.0001)
: Math.max(-this.RADIUS * 0.00002, x * 0.0001);
this.speedY =
y * 0.0001 > 0
? Math.min(this.RADIUS * 0.00002, y * 0.0001)
: Math.max(-this.RADIUS * 0.00002, y * 0.0001);
}
},
// 鼠标进入文字
mouseenter(e) {
// 修改透明度
let doms = document.getElementsByClassName('fontA');
for (let i = 0; i < doms.length; i++) {
doms[i].childNodes[0].style.fillOpacity = '0.3';
}
e.target.childNodes[0].style.fillOpacity = 1;
// 停止动画
clearInterval(this.timer);
this.timer = null;
},
// 鼠标离开文字
mouseleave() {
// 修改透明度
let doms = document.getElementsByClassName('fontA');
for (let i = 0; i < doms.length; i++) {
doms[i].childNodes[0].style.fillOpacity = '';
}
// 开始动画
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
this.timer = setInterval(() => {
this.rotateX(this.speedX);
this.rotateY(this.speedY);
}, 17);
},
// 颜色
changeColors(wordLength) {
//随机变色
for (let i = 0; i < wordLength; i++) {
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
this.colors[i] = "rgb(" + r + "," + g + "," + b + ")";
}
},
}
};
</script><style scoped>
.container {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.fontA {
font-weight: bold;
font-family: Apple LiGothic Medium, serif;
}
</style>