最近在访问悠哥的博客的时候发现他的标签云很有意思，如下图，于是本着华丽呼哨的原则，我也决定整一个！！！

       在悠哥的博客下，我通过f12知道了他用了tag-cloud，于是我再npm上找了一个类似的，叫3dtag-cloud。使用方法如下。

1. 安装这个插件

npm i -S TagCloud

2.在你要用到标签云的页面，引入！在script下！

const TagCloud = require('TagCloud');

3.在你需要标签云的地方定义一个div

<div id="tagCloud" ></div>

4.在mounted中使用！

let container = document.getElementById('tagCloud')
TagCloud(container, this.tagList, this.tagCloud);

       重点说明一下这里，this.tagList是你的标签，this.tagCloud是你定义3d标签云的属性（默认其实最合适），我使用的是默认的，想要修改配置的小伙伴可以参考作者源码，我给大家贴一下。

 // 计算配置
        self.radius = self.config.radius; // 滚动半径
        self.depth = 2 * self.radius; // 滚动深度
        self.size = 1.5 * self.radius; // 随鼠标滚动变速作用区域
        self.maxSpeed = TagCloud._getMaxSpeed(self.config.maxSpeed); // 滚动最大速度倍数
        self.initSpeed = TagCloud._getInitSpeed(self.config.initSpeed); // 滚动初速度
        self.direction = self.config.direction; // 初始滚动方向
        self.keep = self.config.keep; // 鼠标移出后是否保持之前滚动

// 默认配置
    static _defaultConfig = {
        radius: 100, // 滚动半径, 单位px
        maxSpeed: 'normal', // 滚动最大速度, 取值: slow, normal(默认), fast
        initSpeed: 'normal', // 滚动初速度, 取值: slow, normal(默认), fast
        direction: 135, // 初始滚动方向, 取值角度(顺时针deg): 0 对应 top, 90 对应 left, 135 对应 right-bottom(默认)...
        keep: true, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
    };

       如上配置，这要在return里边设置初始值就可以了！

       这里提个小建议，建议大家把这样的模块拿出来封装一下，便于其他页面也可以使用。

       我们来看一下效果！

       美中不足的是，这个插件的作者没有设置点击事件，所以这个标签云你只能看，不能点击跳转！

       如果小伙伴们觉得想省事一点，不想太多麻烦就使用上边的办法！如果跟我一样是个死心眼，就用下边的办法实现跳转！

       所以我重新百度了一套！vue实现标签云效果，大家可以参考一下！当然大家先得按他的写出这样的效果！值得注意的是，咱们是要在咱们的页面中写，而不是写在app.vue这个页面下，这个是公共页面！

       那么他这个是百分百对吗？或者说可以拿来就用吗？不是！需要根据咱们的实际情况，具体情况具体修改！

       我写的跟他的大致相同，但是我们的标签是通过后台发起请求返回的数据，而不是前端直接写死的，所以这里就会出现一个问题，vue生命周期这一点不可避免，你用他的这个直接将你后台返回数据渲染，会发现渲染失败，因为他在created中就开始赋值了，而我们请求后台返回数据的时间已经超过了created的赋值时间，所以会失败！那么这时候就需要改变一下策略，在我后台请求成功返回的地方来赋值，就不会出现渲染不成功的情况了！代码如下！

listTag () {
  this.$http({
    url: this.$http.adornUrl('/article/searchTag'),
    method: 'get',
    params: this.$http.adornParams()
  }).then(({data}) => {
    if (data && data.status === 0) {
      // this.tagList = data.result.data
      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)//计算标签相对于球心的角度
        // debugger
        tag.text = this.tagList[i];
        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);
        tag.href = '/articles/search'+ '?keywords=' + tag.text;//给标签添加链接
        tags.push(tag);
      }
      this.tagList = tags;//让vue替我们完成视图更新
    }
  })

此时运行就完美无缺了！

这里我就不解释他的代码了，作为一个后端，我还是会用就可以了！

效果如下图！

这里有个bug，就是鼠标移除速度不会变回原始速度！有牛牛感兴趣可以解决一下，如能解决，群里私我，必然答谢！

至此全文结束，拜了个拜