词云效果

<template>
  <div class="random">
    <div
      v-for="(item, index) in tags"
      :key="index"
      class="tag-body-tags-li"
    >
      <a
        class="tag-item"
        v-for="(tag, elIndex) in item"
        :key="elIndex"
        :style="{ color: $RandomColor(), 'font-size': $RandomFontSize() }"
      >
      <span>{{ tag }}</span>
      <span class="tagNum">1/15</span>
    </a>
    </div>
  </div>
</template>

<script>
const $NormalSort = function(arr) {
  var temp = [],
    i = 0,
    l = arr.length,
    leftTo = 0,
    rightTo = 0,
    sortArr = arr.sort(function(a, b) {
      return b - a;
    }); //先将数组从大到小排列得到 [7,6,5,5,4,3,2,1]
  while (arr.length > 1) {
    let a = arr.pop();
    let b = arr.pop();
    if (leftTo < rightTo) {
      temp[i] = b;
      temp[l - (i + 1)] = a;
    } else {
      temp[i] = b;
      temp[l - (i + 1)] = a;
    }
    i++;
  }
  return temp;
};

/*
 * 随机拆分一个数
 * params 总和，个数，最大值 {num}
 */

const $RandomSplit = function(total, nums, max) {
  let rest = total;
  let result = Array.apply(null, { length: nums })
    .map((n, i) => nums - i)
    .map((n) => {
      const v = 1 + Math.floor(Math.random() * (max | ((rest / n) * 2 - 1)));
      rest -= v;
      return v;
    });
  result[nums - 1] += rest;
  return result;
};

/*利用Box-Muller方法极坐标形式    使用两个均匀分布产生一个正态分布*/
const $Normal = function(mean, sigma) {
  var u = 0.0,
    v = 0.0,
    w = 0.0,
    c = 0.0;
  do {
    //获得两个（-1,1）的独立随机变量
    u = Math.random() * 2 - 1.0;
    v = Math.random() * 2 - 1.0;
    w = u * u + v * v;
  } while (w == 0.0 || w >= 1.0);
  c = Math.sqrt((-2 * Math.log(w)) / w);
  return mean + u * c * sigma;
};

/*随机颜色rgb*/
const $RandomColor = function() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + "," + g + "," + b + ")";
};

/*随机颜色hsl 防止重叠可以使用hsl*/
const $RandomColor2 = function() {
  return (
    "hsl(" +
    Math.round(Math.random() * 360) +
    "," +
    Math.round(Math.random() * 100) +
    "%," +
    Math.round(Math.random() * 80) +
    "%)"
  );
};

const $RandomFontSize = function() {
  return `${Math.floor(Math.random() * 10 + 12)}px`;
};


export default {
  name: "Page404",
  data: () => {
    return {
      testList: [],
      tagList: [
        "前端开发",
        "UI设计",
        "后端开发",
        "Python",
        "JAVA",
        "Vue",
        "React",
        "Angular",
        "Javascript",
        "Goland",
        "前端开发",
        "UI设计",
        "后端开发",
        "Python",
        "JAVA",
        "Vue",
        "React",
        "Angular",
        "Javascript",
        "Goland",
      ]
    }
  },
  computed: {
    tags() {
      const testList = {
        value: this.testList
      }
      const tagList = {
        value: this.tagList
      }
      testList.value = $NormalSort($RandomSplit(tagList.value.length, 6)); //获取数据结构
      let temp = tagList.value.sort(function(a, b) {
        //重新随机排序
        return Math.random() > 0.5 ? -1 : 1;
      })
        .concat();
      return testList.value.map((v, k) => {
        //根据list生成数据结构
        return temp.splice(0, v);
      });
    }
  },
  methods: {
    $RandomColor: $RandomColor,
    $RandomFontSize: $RandomFontSize
  }
}
</script>

<style lang="scss" scoped>
.random {
  height: 300px !important;
  .tag-body-tags-li {
    display: flex;
    align-items: center;
    justify-content: center;
    .tag-item {
      margin: 10px;
      display: inline-block;
      position: relative;
      .tagNum {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 100%);
        font-size: 12px;
        width: 100%;
        text-align: center;
        display: inline-block
      }
    }
  }
}
</style>