vue词云实现方式

第一种

<template>
  <div class='word-box'>
    <!-- 第一种 -->
    <svg :width='width' :height='height' @mousemove='listener($event)'>
      <a href="#" v-for='(tag, index) in tags' :key="index" style="background:red">
        <text :x='tag.x' :y='tag.y' :font-size='14 * (600 / (600 - tag.z))' :fill-opacity='((400 + tag.z) / 600)'
          :fill='tag.color'>{{ tag.text }}</text>
      </a>
    </svg>
  </div>
</template>

<script>
export default {
  name: "wordCloud",
  props: {
    word: {
      type: Array,
      default: () => {
        return [
          {
            wordName: '好吃',
            wordValue: 18
          },
          {
            wordName: '美味',
            wordValue: 5
          },
          {
            wordName: '物美价廉',
            wordValue: 7
          },
          {
            wordName: '好吃',
            wordValue: 18
          },
          {
            wordName: '美味',
            wordValue: 15
          },
          {
            wordName: '物美价廉',
            wordValue: 2
          },
          {
            wordName: '好吃',
            wordValue: 18
          },
          {
            wordName: '美味',
            wordValue: 15
          },
          {
            wordName: '物美价廉',
            wordValue: 2
          },
          {
            wordName: '物美价廉',
            wordValue: 2
          },
          {
            wordName: '好吃',
            wordValue: 18
          },
          {
            wordName: '美味',
            wordValue: 15
          },
          {
            wordName: '物美价廉',
            wordValue: 2
          },
          {
            wordName: '物美价廉',
            wordValue: 2
          },
          {
            wordName: '好吃',
            wordValue: 18
          },
          {
            wordName: '美味',
            wordValue: 15
          },
          {
            wordName: '物美价廉',
            wordValue: 2
          },
        ]
      }
    },
  },
  data () {
    return {
      width: 600, //svg宽度
      height: 400, //svg高度
      tagsNum: 20, //标签数量
      RADIUS: 160, //球的半径
      speedX: Math.PI / 360, //球一帧绕x轴旋转的角度
      speedY: Math.PI / 360, //球-帧绕y轴旋转的角度
      tags: [],
    };
  },
  components: {},
  computed: {
    CX () {
      //球心x坐标
      return this.width / 2;
    },
    CY () {
      //球心y坐标
      return this.height / 2;
    },
  },
  created () {
    setInterval(() => {
      this.rotateX(this.speedX);
      this.rotateY(this.speedY);
    }, 17);
  },
  watch: {
    word: {
      handler (val) {
        console.log(val);
        this.setWord();
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    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;
      }
    },
    setWord () {
      let tags = [];
      this.word.forEach((ele, 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.text = ele.wordName;
        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 * (ele.wordValue / 10);
        tag.color = this.rgb();
        tag.size = ele.wordValue;
        tags.push(tag);
      });
      this.tags = tags; //让vue替我们完成视图更新
    },
    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);
    },
    rgb () {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      var color = "#" + r.toString(16) + g.toString(16) + b.toString(16);
      return color;
    },
  },
};
</script>
<style lang='scss' scoped>
.word-box {
  display: flex;
  justify-content: center;
  width: 600px;
  margin: 200px auto;
  background: #ccc;
}

.word-cloud {
  height: 500px;
  width: 1100px;
}
</style>

第二种

<template>
  <div class='word-box'>
    <div id="word" ref="word-box" class='word-cloud'></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min.js";
export default {
  name: "wordCloud",
  props: {
    word: {
      type: Array,
      default: () => {
        return [
          {
            wordName: '好吃',
            wordValue: 18
          },
          {
            wordName: '美味',
            wordValue: 5
          },
          {
            wordName: '物美价廉',
            wordValue: 7
          },
          {
            wordName: '好吃',
            wordValue: 18
          },
          {
            wordName: '美味',
            wordValue: 15
          },
          {
            wordName: '物美价廉',
            wordValue: 2
          },
          {
            wordName: '好吃',
            wordValue: 18
          },
          {
            wordName: '美味',
            wordValue: 15
          },
          {
            wordName: '物美价廉',
            wordValue: 2
          },
          {
            wordName: '物美价廉',
            wordValue: 2
          },
          {
            wordName: '好吃',
            wordValue: 18
          },
          {
            wordName: '美味',
            wordValue: 15
          },
          {
            wordName: '物美价廉',
            wordValue: 2
          },
          {
            wordName: '物美价廉',
            wordValue: 2
          },
          {
            wordName: '好吃',
            wordValue: 18
          },
          {
            wordName: '美味',
            wordValue: 15
          },
          {
            wordName: '物美价廉',
            wordValue: 2
          },
        ]
      }
    },
  },
  data () {
    return {};
  },
  mounted () {
    // 测试初始化 （可删除）
    this.setWord()
  },
  watch: {
    word: {
      handler (val) {
        this.setWord();
      },
      deep: true,
    },
  },
  methods: {
    setWord () {
      let wordList = this.word.map((res) => {
        return { value: res.wordValue, name: res.wordName };
      });
      let a = this.$refs["word-box"];
      let myChart2 = echarts.init(a);
      myChart2.setOption({
        series: [
          {
            type: "wordCloud",
            //用来调整词之间的距离
            gridSize: 10,
            //用来调整字的大小范围
            sizeRange: [14, 60],
            //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            rotationRange: [-90, 90],
            //随机生成字体颜色
            textStyle: {
              fontFamily: "sans-serif",
              fontWeight: "bold",
              color: function () {
                // Random color
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                  ].join(",") +
                  ")"
                );
              },
            },
            emphasis: {
              focus: "self",

              textStyle: {
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            //位置相关设置
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            width: "200%",
            height: "200%",
            //数据
            data: wordList,
          },
        ],
      });
      //点击事件
      myChart2.on("click", function (params) {
        alert(params.name);
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.word-box {
  display: flex;
  justify-content: center;
  width: 100%;
}

.word-cloud {
  height: 500px;
  width: 1100px;
}
</style>