标签云效果

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

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>