标签云效果

产品要求，词云要实现动态滚动。查资料，改写效果。

echarts词云效果

在这里插入图片描述
传统的echarts-wordCloud不能满足需求。

标签云

换了标签云，以下是代码

<template><div class="mx-auto" :style="{ width: width + 'px' }"><svg :width="width" :height="height" @mousemove="listener($event)"><a :href="tag.href" v-for="tag in tags" :key="tag.id"><text:x="tag.x":y="tag.y":font-size="18 * (600 / (600 - tag.z))":fill-opacity="(400 + tag.z) / 600":style="{ fill: tag.fill }">{{ tag.text }}</text></a></svg></div>
</template><script>
export default {props: {tagList: {type: Array,default: () => [],},},name: "tagCloud",data() {return {width: 800,height: 520,RADIUS: 230,speedX: Math.PI / 360,speedY: Math.PI / 360,tags: [],};},watch: {tagList: {handler(n, o) {this.init()},deep: true}},computed: {CX() {return this.width / 2.4;},CY() {return this.height / 2;},},created() {},mounted() {//使球开始旋转// const winWidth = document.documentElement.clientWidth || document.body.clientWidth;// this.width = winWidth * 0.8;// this.height = winWidth * (426 / 495);console.log(this.tagList);this.init();setInterval(() => {this.rotateX(this.speedX);this.rotateY(this.speedY);}, 18);},methods: {init() {let tags = [];for (let i = 0; i < this.tagList.length; i++) {let tag = {};let k = -1 + (2 * (i + 1) - 1) / this.tagList.length;let a = Math.acos(k);let b = a * Math.sqrt(this.tagList.length * Math.PI);tag.text = this.tagList[i].name;tag.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b);tag.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b);tag.z = this.RADIUS * Math.cos(a);tag.fill = this.getColor();// tag.href = '/knowledge-base/list/allMap?label=' + this.tagList[i].id;tags.push(tag);}this.tags = tags;},// 获取随机色getColor() {// let r = parseInt(Math.random() * 256);// let g = parseInt(Math.random() * 256);// let b = parseInt(Math.random() * 256);// return `rgba(${r},${g},${b},1)`;const colors = ['#2875B9','#2875B9','#2875B9'];const index = Math.floor(Math.random() * 3);return colors[index];},rotateX(angleX) {var cos = Math.cos(angleX);var sin = Math.sin(angleX);for (let tag of this.tags) {var y1 = (tag.y - this.CY) * cos - tag.z * sin + this.CY;var z1 = tag.z * cos + (tag.y - this.CY) * sin;tag.y = y1;tag.z = z1;}},rotateY(angleY) {var cos = Math.cos(angleY);var sin = Math.sin(angleY);for (let tag of this.tags) {var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;var z1 = tag.z * cos + (tag.x - this.CX) * sin;tag.x = x1;tag.z = z1;}},listener(event) {//响应鼠标移动var x = event.clientX - this.CX;var y = event.clientY - this.CY;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);},},
};
</script><style lang="less" scoped></style>