网络日志

词云滚动效果

实现效果:

第一种: 使用tagcanvas

<template>
  <div class="world-cloud-3d">
    <div class="world-cloud-canvas-wrapper">
      <canvas
        id="world-cloud-canvas"
        width="400"
        height="200"
        style="width: 100%; max-width: 400px"
      >
      </canvas>
    </div>
    <div style="display: none" id="weightTags"></div>
  </div>
</template>

<script>
import '@/assets/js/tagcanvas.js'
export default {
  data: function () {
    return {}
  },
  props: {
    wordArr: {
      type: Array,
      default: () => [
        {
          name: '西安市公共交通集团有限公司',
          light: true
        },
        {
          name: '广平县永信财税服务有限公司',
          light: true
        }, {
          name: '河南薪火传承数字科技有限公司',
          light: true
        }, {
          name: '深圳市智谷天厨科技有限公司',
          light: true
        }, {
          name: '天津麟才教育咨询有限公司',
          light: true
        }, {
          name: '深圳市九策有限公司',
          light: true
        }, {
          name: '深圳大疆有限公司',
          light: true
        },
        {
          name: '云基华海信息技术',
          light: true
        }
      ]
    }
  },
  methods: {
    // 启动词云
    startWorldCloud () {
      this.createTagListDom()
      const o = {
        maxSpeed: 0.01, // 添加最大的运动速度
        minSpeed: 0.01, // 添加最小的运动速度这样就可以保证一直运动,不会停止
        textHeight: 25,
        outlineMethod: 'colour', // tag hover 之后的 轮廓效果
        fadeIn: 800,
        outlineColour: '#fff',
        outlineOffset: 0,
        depth: 0.97,
        minBrightness: 0.2,
        wheelZoom: false,
        reverse: true, // 运动方向与鼠标移动方向相反
        shadowBlur: 2,
        shuffleTags: true,
        shadowOffset: [1, 1],
        stretchX: 1.7, // Stretch or compress the cloud horizontally. 水平拉伸词云
        initial: [0.1, 0.1], // 给词云添加一个初始的运动方向
        textFont: null, // 字体设置为 null 就会继承 每个 tag的a 标签的字体
        textColour: null, // 字体颜色设置为 null 就会继承 每个 tag的a 标签的字体颜色
        weight: true, // weight 打开,就可以根据默认的字体的大小作为权重,对tag 的样式进行调整
        weightMode: 'size', // 样式调整的方式
        weightSize: 0.5 // 调整 tag 字体的大小,加个 权重
      }
      // eslint-disable-next-line no-undef
      TagCanvas.Start('world-cloud-canvas', 'weightTags', o)
      try {
        // 如果不是更新,说明是第一次渲染,就启动 tagcanvas, 否则就代表更新
        // eslint-disable-next-line no-undef
        if (!updateFlag) {
          // eslint-disable-next-line no-undef
          TagCanvas.Start('world-cloud-canvas', 'weightTags', o)
        } else {
          // eslint-disable-next-line no-undef
          TagCanvas.Update('world-cloud-canvas')
        }
      } catch (e) {}
    },
    // 根据父组件传过来的 wordArr 创建 TagList Dom列表,放到页面中供,canvas 渲染
    // 这里后端的数组中的数据结构是一个对象 { name: 要展示的tag名字, light: true/false 据定是否要加重展示}
    createTagListDom: function () {
      const res = [...this.wordArr]
      const fragment = new DocumentFragment()
      for (let i = 0; i < res.length; i++) {
        const a = document.createElement('a')
        // 字符串长度大于10就要换行
        if (res[i].name.length > 10) {
          const charArr = res[i].name.split('')
          charArr.splice(10, 0, '<br>')
          res[i].name = charArr.join('')
        }
        a.innerHTML = res[i].name
        a.href = 'javascript:void(0)'
        // 如果是要加重展示就 设置属性为 huge 或large, 否则就设置属性为 medium 或small
        if (res[i].light) {
          const readomValue = Math.random()
          a.className = readomValue > 0.5 ? 'huge' : 'large'
        } else {
          const readomValue = Math.random()
          a.className = readomValue > 0.5 ? 'medium' : 'small'
        }
        fragment.append(a)
      }
      // 更新 tagContainer中的 tag元素
      const tagsContainer = document.querySelector('#weightTags')
      tagsContainer.innerHTML = ''
      tagsContainer.append(fragment)
    }
  },
  watch: {
    // 如果词云发生变化就要 重绘 tagcanvas
    wordArr: function () {
      this.startWorldCloud(true)
    }
  },
  mounted () {
    // 组件装载成果 绘制 tagcanvas
    this.startWorldCloud()
  }
}
</script>
<style lang="less">
.world-cloud-3d {
  width: 100%;
  height: 100%;
  // border: 1px solid red;
  .world-cloud-canvas-wrapper {
    width: 400px;
    height: 200px;
    max-width: 400px;
    max-height: 200px;
  }
  #weightTags {
    font-size: 12px;
    .huge {
      font-size: 30px;
      color: rgb(98,203,235);
    }
    .large {
      font-size: 25px;
      color: rgb(98,203,235, 0.6);
    }
    .medium {
      font-size: 20px;
      color: rgb(98,203,235, 0.4);
    }
    .small {
      font-size: 15px;
      color: rgb(98,203,235, 0.2);
    }
  }
}
</style>

tagcanvas.js源码:

/**
 * Copyright (C) 2010-2012 Graham Breach
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
/**
 * TagCanvas 1.14
 * For more information, please contact <graham@goat1000.com>
 */
(function(){
var i, j, abs = Math.abs, sin = Math.sin, cos = Math.cos, max = Math.max, min = Math.min,
    hexlookup3 = {}, hexlookup2 = {}, hexlookup1 = {
    0:"0,",   1:"17,",  2:"34,",  3:"51,",  4:"68,",  5:"85,",
    6:"102,", 7:"119,", 8:"136,", 9:"153,", a:"170,", A:"170,",
    b:"187,", B:"187,", c:"204,", C:"204,", d:"221,", D:"221,",
    e:"238,", E:"238,", f:"255,", F:"255,"
}, Oproto, Tproto, TCproto, doc = document, ocanvas;
for(i = 0; i < 256; ++i) {
    j = i.toString(16);
    if(i < 16)
        j = '0' + j;
    hexlookup2[j] = hexlookup2[j.toUpperCase()] = i.toString() + ',';
}
function Defined(d) {
    return typeof(d) != 'undefined';
}
function PointsOnSphere(n) {
    var i, y, r, phi, pts = [], inc = Math.PI * (3-Math.sqrt(5)), off = 2/n;
    for(i = 0; i < n; ++i) {
        y = i * off - 1 + (off / 2);
        r = Math.sqrt(1 - y*y);
        phi = i * inc;
        pts.push([cos(phi)*r, y, sin(phi)*r]);
    }
    return pts;
}
function Cylinder(n,o,i,j,k,l) {
    var phi, pts = [], inc = Math.PI * (3-Math.sqrt(5)), off = 2/n;
    for(i = 0; i < n; ++i) {
        j = i * off - 1 + (off / 2);
        phi = i * inc;
        k = cos(phi);
        l = sin(phi);
        pts.push(o ? [j, k, l] : [k, j, l]);
    }
    return pts;
}
function PointsOnCylinderV(n) { return Cylinder(n) }
function PointsOnCylinderH(n) { return Cylinder(n,1) }
function SetAlpha(c,a) {
    var d = c, p1, p2, ae = (a*1).toPrecision(3) + ')';
    if(c[0] === '#') {
        if(!hexlookup3[c])
            if(c.length === 4)
                hexlookup3[c] = 'rgba(' + hexlookup1[c[1]] + hexlookup1[c[2]] + hexlookup1[c[3]];
            else
                hexlookup3[c] = 'rgba(' + hexlookup2[c.substr(1,2)] + hexlookup2[c.substr(3,2)] + hexlookup2[c.substr(5,2)];
        d = hexlookup3[c] + ae;
    } else if(c.substr(0,4) === 'rgb(' || c.substr(0,4) === 'hsl(') {
        d = (c.replace('(','a(').replace(')', ',' + ae));
    } else if(c.substr(0,5) === 'rgba(' || c.substr(0,5) === 'hsla(') {
        p1 = c.lastIndexOf(',') + 1, p2 = c.indexOf(')');
        a *= parseFloat(c.substring(p1,p2));
        d = c.substr(0,p1) + a.toPrecision(3) + ')';
    }
    return d;
}
function NewCanvas(w,h) {
    // if using excanvas, give up now
    if(window.G_vmlCanvasManager)
        return null;
    var c = doc.createElement('canvas');
    c.width = w;
    c.height = h;
    return c;
}
// I think all browsers pass this test now...
function ShadowAlphaBroken() {
    var cv = NewCanvas(3,3), c, i;
    if(!cv)
        return false;
    c = cv.getContext('2d');
    c.strokeStyle = '#000';
    c.shadowColor = '#fff';
    c.shadowBlur = 3;
    c.globalAlpha = 0;
    c.strokeRect(2,2,2,2);
    c.globalAlpha = 1;
    i = c.getImageData(2,2,1,1);
    cv = null;
    return (i.data[0] > 0);
}
function FindGradientColour(t,p) {
    var l = 1024, g = t.weightGradient, cv, c, i, gd, d;
    if(t.gCanvas) {
        c = t.gCanvas.getContext('2d');
    } else {
        t.gCanvas = cv = NewCanvas(l,1);
        if(!cv)
            return null;
        c = cv.getContext('2d');
        gd = c.createLinearGradient(0,0,l,0);
        for(i in g)
            gd.addColorStop(1-i, g[i]);
        c.fillStyle = gd;
        c.fillRect(0,0,l,1);
    }
    d = c.getImageData(~~((l-1)*p),0,1,1).data;
    return 'rgba(' + d[0] + ',' + d[1] + ',' + d[2] + ',' + (d[3]/255) + ')';
}
function TextSet(c,f,l,s,sc,sb,so) {
    var xo = (sb || 0) + (so && so[0] < 0 ? abs(so[0]) : 0),
        yo = (sb || 0) + (so && so[1] < 0 ? abs(so[1]) : 0);
    c.font = f;
    c.textBaseline = 'top';
    c.fillStyle = l;
    sc && (c.shadowColor = sc);
    sb && (c.shadowBlur = sb);
    so && (c.shadowOffsetX = so[0], c.shadowOffsetY = so[1]);
    c.fillText(s, xo, yo);
}
function TextToCanvas(s,f,ht,w,h,l,sc,sb,so,padx,pady) {
    var cw = w + abs(so[0]) + sb + sb, ch = h + abs(so[1]) + sb + sb, cv, c;
    cv = NewCanvas(cw+padx,ch+pady);
    if(!cv)
        return null;
    c = cv.getContext('2d');
    TextSet(c,f,l,s,sc,sb,so);
    return cv;
}
function AddShadowToImage(i,sc,sb,so) {
    var cw = i.width + abs(so[0]) + sb + sb, ch = i.height + abs(so[1]) + sb + sb, cv, c,
        xo = (sb || 0) + (so && so[0] < 0 ? abs(so[0]) : 0),
        yo = (sb || 0) + (so && so[1] < 0 ? abs(so[1]) : 0);
    cv = NewCanvas(cw,ch);
    if(!cv)
        return null;
    c = cv.getContext('2d');
    sc && (c.shadowColor = sc);
    sb && (c.shadowBlur = sb);
    so && (c.shadowOffsetX = so[0], c.shadowOffsetY = so[1]);
    c.drawImage(i, xo, yo);
    return cv;
}
function FindTextBoundingBox(s,f,ht) {
    var w = parseInt(s.length * ht), h = parseInt(ht * 2), cv = NewCanvas(w,h), c, idata, w1, h1, x, y, i, ex;
    if(!cv)
        return null;
    c = cv.getContext('2d');
    c.fillStyle = '#000';
    c.fillRect(0,0,w,h);
    TextSet(c,ht + 'px ' + f,'#fff',s)

    idata = c.getImageData(0,0,w,h);
    w1 = idata.width; h1 = idata.height;
    ex = {
        min: { x: w1, y: h1 },
        max: { x: -1, y: -1 }
    };
    for(y = 0; y < h1; ++y) {
        for(x = 0; x < w1; ++x) {
            i = (y * w1 + x) * 4;
            if(idata.data[i+1] > 0) {
                if(x < ex.min.x) ex.min.x = x;
                if(x > ex.max.x) ex.max.x = x;
                if(y < ex.min.y) ex.min.y = y;
                if(y > ex.max.y) ex.max.y = y;
            }
        }
    }
    // device pixels might not be css pixels
    if(w1 != w) {
        ex.min.x *= (w / w1);
        ex.max.x *= (w / w1);
    }
    if(h1 != h) {
        ex.min.y *= (w / h1);
        ex.max.y *= (w / h1);
    }

    cv = null;
    return ex;
}
function FixFont(f) {
    return "'" + f.replace(/(\'|\")/g,'').replace(/\s*,\s*/g, "', '") + "'";
}
function AddHandler(h,f,e) {
    e = e || doc;
    if(e.addEventListener)
        e.addEventListener(h,f,false);
    else
        e.attachEvent('on' + h, f);
}
function AddImage(i,t,tl) {
    if(i.complete) {
        t.w = i.width;
        t.h = i.height;
        tl.push(t);
    } else {
        AddHandler('load',function() {
            t.w = this.width;
            t.h = this.height;
            tl.push(t);
        },i);
    }
}
function GetProperty(e,p) {
    var dv = doc.defaultView, pc = p.replace(/\-([a-z])/g,function(a){return a[1].toUpperCase()});
    return (dv && dv.getComputedStyle && dv.getComputedStyle(e,null).getPropertyValue(p)) ||
        (e.currentStyle && e.currentStyle[pc]);
}
function FindWeight(t,a) {
    var w = 1, p;
    if(t.weightFrom) {
        w = 1 * (a.getAttribute(t.weightFrom) || t.textHeight);
    } else if(p = GetProperty(a,'font-size')) {
        w = (p.indexOf('px') > -1 && p.replace('px','') * 1) ||
            (p.indexOf('pt') > -1 && p.replace('pt','') * 1.25) ||
            p * 3.3;
    } else {
        t.weight = false;
    }
    return w;
}
function MouseMove(e) {
    var i, tc, dd = doc.documentElement, p;
    for(i in TagCanvas.tc) {
        tc = TagCanvas.tc[i];
        if(tc.tttimer) {
            clearTimeout(tc.tttimer);
            tc.tttimer = null;
        }
        p = AbsPos(i);
        if(e.pageX) {
            tc.mx = e.pageX - p.x;
            tc.my = e.pageY - p.y;
        } else {
            tc.mx = e.clientX + (dd.scrollLeft || doc.body.scrollLeft) - p.x;
            tc.my = e.clientY + (dd.scrollTop || doc.body.scrollTop) - p.y;
        }
    }
}
function MouseClick(e) {
    var t = TagCanvas, cb = doc.addEventListener ? 0 : 1,
        tg = e.target && Defined(e.target.id) ? e.target.id : e.srcElement.parentNode.id;
    if(tg && e.button == cb && t.tc[tg]) {
        MouseMove(e);
        t.tc[tg].Clicked(e);
    }
}
function MouseWheel(e) {
    var t = TagCanvas,
        tg = e.target && Defined(e.target.id) ? e.target.id : e.srcElement.parentNode.id;
    if(tg && t.tc[tg]) {
        e.cancelBubble = true;
        e.returnValue = false;
        e.preventDefault && e.preventDefault();
        t.tc[tg].Wheel((e.wheelDelta || e.detail) > 0);
    }
}
function DrawCanvas() {
    var t = TagCanvas.tc, i;
    for(i in t)
        t[i].Draw();
}
function AbsPos(id) {
    var e = doc.getElementById(id), x = e.offsetLeft, y = e.offsetTop;
    while(e = e.offsetParent) {
        x += e.offsetLeft;
        y += e.offsetTop;
    }
    return {x:x,y:y};
}
function RotX(p1,t) {
    var s = sin(t), c = cos(t);
    return {x:p1.x, y:(p1.y * c) + (p1.z * s), z:(p1.y * -s) + (p1.z * c)};
}
function RotY(p1,t) {
    var s = sin(t), c = cos(t);
    return {x:(p1.x * c) + (p1.z * -s), y:p1.y, z:(p1.x * s) + (p1.z * c)};
}
function Project(tc,p1,w,h,fov,asp) {
    var yn, xn, zn, m = tc.z1 / (tc.z1 + tc.z2 + p1.z);
    yn = p1.y * m;
    xn = p1.x * m;
    zn = tc.z2 + p1.z;
    return {x:xn, y:yn, z:zn};
}
/**
 * @constructor
 */
function Outline(tc) {
    this.ts = new Date().valueOf();
    this.tc = tc;
    this.x = this.y = this.w = this.h = this.sc = 1;
    this.z = 0;
    this.Draw = tc.pulsateTo < 1 && tc.outlineMethod != 'colour' ? this.DrawPulsate : this.DrawSimple;
    this.SetMethod(tc.outlineMethod);
}
Oproto = Outline.prototype;
Oproto.SetMethod = function(om) {
    var methods = {
        block: ['PreDraw','DrawBlock'],
        colour: ['PreDraw','DrawColour'],
        outline: ['PostDraw','DrawOutline'],
        classic: ['LastDraw','DrawOutline']
    }, funcs = methods[om] || methods.outline;
    this[funcs[0]] = this.Draw;
    this.drawFunc = this[funcs[1]];
};
Oproto.Update = function(x,y,w,h,sc,p,xo,yo) {
    var o = this.tc.outlineOffset, o2 = 2 * o;
    this.x = sc * x + xo - o;
    this.y = sc * y + yo - o;
    this.w = sc * w + o2;
    this.h = sc * h + o2;
    this.sc = sc; // used to determine frontmost
    this.z = p.z;
};
Oproto.DrawOutline = function(c,x,y,w,h,colour) {
    c.strokeStyle = colour;
    c.strokeRect(x,y,w,h);
};
Oproto.DrawColour = function(c,x,y,w,h,colour,tag,x1,y1) {
    return this[tag.image ? 'DrawColourImage' : 'DrawColourText'](c,x,y,w,h,colour,tag,x1,y1);
};
Oproto.DrawColourText = function(c,x,y,w,h,colour,tag,x1,y1) {
    var normal = tag.colour;
    tag.colour = colour;
    tag.Draw(c,x1,y1);
    tag.colour = normal;
    return 1;
};
Oproto.DrawColourImage = function(c,x,y,w,h,colour,tag,x1,y1) {
    var ccanvas = c.canvas, fx = ~~max(x,0), fy = ~~max(y,0),
        fw = min(ccanvas.width - fx, w) + .5|0, fh = min(ccanvas.height - fy,h) + .5|0, cc;
    if(ocanvas)
        ocanvas.width = fw, ocanvas.height = fh;
    else
         ocanvas = NewCanvas(fw, fh);
    if(!ocanvas)
        return this.SetMethod('outline'); // if using IE and images, give up!
    cc = ocanvas.getContext('2d');

    cc.drawImage(ccanvas,fx,fy,fw,fh,0,0,fw,fh);
    c.clearRect(fx,fy,fw,fh);
    tag.Draw(c,x1,y1);
    c.setTransform(1,0,0,1,0,0);
    c.save();
    c.beginPath();
    c.rect(fx,fy,fw,fh);
    c.clip();
    c.globalCompositeOperation = 'source-in';
    c.fillStyle = colour;
    c.fillRect(fx,fy,fw,fh);
    c.restore();
    c.globalCompositeOperation = 'destination-over';
    c.drawImage(ocanvas,0,0,fw,fh,fx,fy,fw,fh);
    c.globalCompositeOperation = 'source-over';
    return 1;
};
Oproto.DrawBlock = function(c,x,y,w,h,colour) {
    c.fillStyle = colour;
    c.fillRect(x,y,w,h);
};
Oproto.DrawSimple = function(c, tag, x1, y1) {
    var t = this.tc;
    c.setTransform(1,0,0,1,0,0);
    c.strokeStyle = t.outlineColour;
    c.lineWidth = t.outlineThickness;
    c.shadowBlur = c.shadowOffsetX = c.shadowOffsetY = 0;
    c.globalAlpha = 1;
    return this.drawFunc(c,this.x,this.y,this.w,this.h,t.outlineColour,tag,x1,y1);
};
Oproto.DrawPulsate = function(c, tag, x1, y1) {
    var diff = new Date().valueOf() - this.ts, t = this.tc;
    c.setTransform(1,0,0,1,0,0);
    c.strokeStyle = t.outlineColour;
    c.lineWidth = t.outlineThickness;
    c.shadowBlur = c.shadowOffsetX = c.shadowOffsetY = 0;
    c.globalAlpha = t.pulsateTo + ((1 - t.pulsateTo) *
        (0.5 + (cos(2 * Math.PI * diff / (1000 * t.pulsateTime)) / 2)));
    return this.drawFunc(c,this.x,this.y,this.w,this.h,t.outlineColour,tag,x1,y1);
};
Oproto.Active = function(c,x,y) {
    return (x >= this.x && y >= this.y &&
        x <= this.x + this.w && y <= this.y + this.h);
};
Oproto.PreDraw = Oproto.PostDraw = Oproto.LastDraw = function() {};
/**
 * @constructor
 */
function Tag(tc,name,a,v,w,h,col,font) {
    var c = tc.ctxt, i;
    this.tc = tc;
    this.image = name.src ? name : null;
    this.name = name.src ? '' : name;
    this.title = a.title || null;
    this.a = a;
    this.p3d = { x: v[0] * tc.radius * 1.1, y: v[1] * tc.radius * 1.1, z: v[2] * tc.radius * 1.1};
    this.x = this.y = 0;
    this.w = w;
    this.h = h;
    this.colour = col || tc.textColour;
    this.textFont = font || tc.textFont;
    this.weight = this.sc = this.alpha = 1;
    this.weighted = !tc.weight;
    this.outline = new Outline(tc);
    if(this.image) {
        if(tc.txtOpt && tc.shadow) {
            i = AddShadowToImage(this.image,tc.shadow,tc.shadowBlur,tc.shadowOffset);
            if(i) {
                this.image = i;
                this.w = i.width;
                this.h = i.height;
            }
        }
    } else {
        this.textHeight = tc.textHeight;
        this.extents = FindTextBoundingBox(this.name, this.textFont, this.textHeight);
        this.Measure(c,tc);
    }
    this.SetShadowColour = tc.shadowAlpha ? this.SetShadowColourAlpha : this.SetShadowColourFixed;
    this.SetDraw(tc);
}
Tproto = Tag.prototype;
Tproto.SetDraw = function(t) {
    this.Draw = this.image ? (t.ie > 7 ? this.DrawImageIE : this.DrawImage) : this.DrawText;
};
Tproto.Measure = function(c,t) {
    this.h = this.extents ? this.extents.max.y + this.extents.min.y : this.textHeight;
    c.font = this.font = this.textHeight + 'px ' + this.textFont;
    this.w = c.measureText(this.name).width;
    if(t.txtOpt) {
        var s = t.txtScale, th = s * this.textHeight, f = th + 'px ' + this.textFont,
            soff = [s*t.shadowOffset[0],s*t.shadowOffset[1]], cw;
        c.font = f;
        cw = c.measureText(this.name).width;
        this.image = TextToCanvas(this.name, f, th, cw, s * this.h, this.colour,
            t.shadow, s * t.shadowBlur, soff, s, s);
        if(this.image) {
            this.w = this.image.width / s;
            this.h = this.image.height / s;
        }
        this.SetDraw(t);
        t.txtOpt = this.image;
    }
};
Tproto.SetWeight = function(w) {
    this.weight = w;
    this.Weight(this.tc.ctxt, this.tc);
    this.Measure(this.tc.ctxt, this.tc);
};
Tproto.Weight = function(c,t) {
    var w = this.weight, m = t.weightMode;
    this.weighted = true;
    if(m == 'colour' || m == 'both')
        this.colour = FindGradientColour(t, (w - t.min_weight) / (t.max_weight-t.min_weight));
    if(m == 'size' || m == 'both')
        this.textHeight = w * t.weightSize;
    this.extents = FindTextBoundingBox(this.name, this.textFont, this.textHeight);
};
Tproto.SetShadowColourFixed = function(c,s,a) {
    c.shadowColor = s;
};
Tproto.SetShadowColourAlpha = function(c,s,a) {
    c.shadowColor = SetAlpha(s, a);
};
Tproto.DrawText = function(c,xoff,yoff) {
    var t = this.tc, x = this.x, y = this.y, w, h, s = this.sc;
    c.globalAlpha = this.alpha;
    c.setTransform(s,0,0,s,0,0);
    c.fillStyle = this.colour;
    t.shadow && this.SetShadowColour(c,t.shadow,this.alpha);
    c.font = this.font;
    w = this.w;
    h = this.h;
    x += (xoff / s) - (w / 2);
    y += (yoff / s) - (h / 2);
    c.fillText(this.name, x, y);
};
Tproto.DrawImage = function(c,xoff,yoff) {
    var t = this.tc, x = this.x, y = this.y, s = this.sc,
        i = this.image, w = this.w, h = this.h, a = this.alpha,
        shadow = this.shadow;
    c.globalAlpha = a;
    c.setTransform(s,0,0,s,0,0);
    c.fillStyle = this.colour;
    shadow && this.SetShadowColour(c,shadow,a);
    x += (xoff / s) - (w / 2);
    y += (yoff / s) - (h / 2);
    c.drawImage(i, x, y, w, h);
};
Tproto.DrawImageIE = function(c,xoff,yoff) {
    var i = this.image, s = this.sc,
        w = i.width = this.w*s, h = i.height = this.h * s,
        x = (this.x*s) + xoff - (w/2), y = (this.y*s) + yoff - (h/2);
    c.setTransform(1,0,0,1,0,0);
    c.globalAlpha = this.alpha;
    c.drawImage(i, x, y);
};
Tproto.Calc = function(yaw,pitch) {
    var pp = RotY(this.p3d,yaw), t = this.tc, mb = t.minBrightness, r = t.radius;
    this.p3d = RotX(pp,pitch);
    pp = Project(t, this.p3d, this.w, this.h, Math.PI / 4, 20);
    this.x = pp.x;
    this.y = pp.y;
    this.sc = (t.z1 + t.z2 - pp.z) / t.z2;
    this.alpha = max(mb,min(1,mb + 1 - ((pp.z - t.z2 + r) / (2 * r))));
};
Tproto.CheckActive = function(c,xoff,yoff) {
    var t = this.tc, o = this.outline,
        w = this.w, h = this.h,
        x = this.x - w/2, y = this.y - h/2;
    o.Update(x, y, w, h, this.sc, this.p3d, xoff, yoff);
    return o.Active(c, t.mx, t.my) ? o : null;
};
Tproto.Clicked = function(e) {
    var a = this.a, t = a.target, h = a.href, evt;
    if(t != '' && t != '_self') {
        if(self.frames[t])
            self.frames[t] = h;
        else if(top.frames[t])
            top.frames[t] = h;
        else
            window.open(h, t);
        return;
    }
    if(a.fireEvent) {
        if(!a.fireEvent('onclick'))
            return;
    } else {
        evt = doc.createEvent('MouseEvents');
        evt.initMouseEvent('click', 1, 1, window, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, null);
        if(!a.dispatchEvent(evt))
            return;
    }
    doc.location = h;
};
/**
 * @constructor
 */
function TagCanvas(cid,lctr,opt) {
    var i, ctr, tl, vl, p, im, ii, tag, c = doc.getElementById(cid),
        cp = ['id','class','innerHTML'], w, weights = [],
        pfuncs = {
            sphere:PointsOnSphere,
            vcylinder:PointsOnCylinderV,
            hcylinder:PointsOnCylinderH
        };

    if(!c) throw 0;
    if(Defined(window.G_vmlCanvasManager)) {
        c = window.G_vmlCanvasManager.initElement(c);
        this.ie = parseFloat(navigator.appVersion.split('MSIE')[1]);
    }
    if(c && (!c.getContext || !c.getContext('2d').fillText)) {
        p = doc.createElement('DIV');
        for(i = 0; i < cp.length; ++i)
            p[cp[i]] = c[cp[i]];
        c.parentNode.insertBefore(p,c);
        c.parentNode.removeChild(c);
        throw 0;
    }
    for(i in TagCanvas.options)
        this[i] = opt && Defined(opt[i]) ? opt[i] :
            (Defined(TagCanvas[i]) ? TagCanvas[i] : TagCanvas.options[i]);

    this.canvas = c;
    this.ctxt = c.getContext('2d');
    this.z1 = (19800 / (Math.exp(this.depth) * (1-1/Math.E))) +
        20000 - 19800 / (1-(1/Math.E));
    this.z2 = this.z1 * (1/this.zoom);
    this.radius = (c.height > c.width ? c.width : c.height)
                * 0.33 * (this.z2 + this.z1) / (this.z1);
    this.max_weight = 0;
    this.min_weight = 200;
    this.textFont = this.textFont && FixFont(this.textFont);
    this.pulsateTo *= 1;
    this.textHeight *= 1;
    this.minBrightness *= 1;
    this.ctxt.textBaseline = 'top';
    if(this.shadowBlur || this.shadowOffset[0] || this.shadowOffset[1]) {
        // let the browser translate "red" into "#ff0000"
        this.ctxt.shadowColor = this.shadow;
        this.shadow = this.ctxt.shadowColor;
        this.shadowAlpha = ShadowAlphaBroken();
    } else {
        delete this.shadow;
    }
    try {
        ctr = doc.getElementById(lctr || cid);
        tl = ctr.getElementsByTagName('a');
        this.taglist = [];

        if(tl.length) {
            this.shape = pfuncs[this.shape] || pfuncs.sphere;
            vl = this.shape(tl.length);
            for(i = 0; i < tl.length; ++i) {
                im = tl[i].getElementsByTagName('img');
                if(im.length) {
                    ii = new Image;
                    ii.src = im[0].src;
                    tag = new Tag(this, ii, tl[i], vl[i], 1, 1);
                    AddImage(ii,tag,this.taglist);
                } else {
                    this.taglist.push(new Tag(this, tl[i].innerText || tl[i].textContent, tl[i],
                        vl[i], 2, this.textHeight + 2, this.textColour || GetProperty(tl[i],'color'),
                        this.textFont || FixFont(GetProperty(tl[i],'font-family'))));
                }
                if(this.weight) {
                    w = FindWeight(this,tl[i]);
                    if(w > this.max_weight) this.max_weight = w;
                    if(w < this.min_weight) this.min_weight = w;
                    weights.push(w);
                }
            }
            if(this.weight = (this.max_weight > this.min_weight)) {
                for(i = 0; i < this.taglist.length; ++i) {
                    this.taglist[i].SetWeight(weights[i]);
                }
            }
        }
        if(lctr && this.hideTags)
            ctr.style.display = 'none';
    } catch(ex) {
        ex;
    }

    this.yaw = this.initial ? this.initial[0] * this.maxSpeed : 0;
    this.pitch = this.initial ? this.initial[1] * this.maxSpeed : 0;
    if(this.tooltip) {
        if(this.tooltip == 'native') {
            this.Tooltip = this.TooltipNative;
        } else {
            this.Tooltip = this.TooltipDiv;
            if(!this.ttdiv) {
                this.ttdiv = doc.createElement('div');
                this.ttdiv.className = this.tooltipClass;
                this.ttdiv.style.position = 'absolute';
                this.ttdiv.style.zIndex = c.style.zIndex + 1;
                AddHandler('mouseover',function(e){e.target.style.display='none';},this.ttdiv);
                doc.body.appendChild(this.ttdiv);
            }
        }
    } else {
        this.Tooltip = this.TooltipNone;
    }
    AddHandler('mousemove', MouseMove, c);
    AddHandler('mouseout', MouseMove, c);
    AddHandler('mouseup', MouseClick, c);
    if(this.wheelZoom) {
        AddHandler('mousewheel', MouseWheel, c);
        AddHandler('DOMMouseScroll', MouseWheel, c);
    }
    TagCanvas.started || (TagCanvas.started = setInterval(DrawCanvas, this.interval));
}
TCproto = TagCanvas.prototype;
TCproto.Draw = function() {
    var cv = this.canvas, cw = cv.width, ch = cv.height, max_sc = 0, yaw = this.yaw, pitch = this.pitch,
        x1 = cw / 2, y1 = ch / 2, c = this.ctxt, active, a, i, aindex = -1, tl = this.taglist, l = tl.length,
        frontsel = this.frontSelect;
    if(yaw == 0 && pitch == 0 && this.drawn)
        return  this.Animate(cw,ch);
    c.setTransform(1,0,0,1,0,0);
    this.active = null;
    for(i = 0; i < l; ++i)
        tl[i].Calc(yaw, pitch);
    tl = tl.sort(function(a,b) {return a.sc-b.sc});

    for(i = 0; i < l; ++i) {
        a = tl[i].CheckActive(c, x1, y1);
        if(a && a.sc > max_sc && (!frontsel || a.z <= 0)) {
            active = a;
            active.index = aindex = i;
            max_sc = a.sc;
        }
    }
    this.active = active;

    if(!this.txtOpt && this.shadow) {
        c.shadowBlur = this.shadowBlur;
        c.shadowOffsetX = this.shadowOffset[0];
        c.shadowOffsetY = this.shadowOffset[1];
    }
    c.clearRect(0,0,cw,ch);
    for(i = 0; i < l; ++i) {
        if(!(aindex == i && active.PreDraw(c, tl[i], x1, y1)))
            tl[i].Draw(c, x1, y1);
        aindex == i && active.PostDraw(c);
    }
    if(this.freezeActive && active) {
        this.yaw = this.pitch = this.drawn = 0;
    } else {
        this.Animate(cw, ch);
        this.drawn = 1;
    }
    active && active.LastDraw(c);
    cv.style.cursor = active ? this.activeCursor : '';
    this.Tooltip(active,tl[aindex]);
};
TCproto.TooltipNone = function() { };
TCproto.TooltipNative = function(active,tag) {
    this.canvas.title = active && tag.title ? tag.title : '';
};
TCproto.TooltipDiv = function(active,tag) {
    var tc = this, s = tc.ttdiv.style, cid = tc.canvas.id;
    if(active && tag.title) {
        tc.ttdiv.innerHTML = tag.title;
        if(s.display == 'none' && ! tc.tttimer) {
            tc.tttimer = setTimeout(function() {
                var p = AbsPos(cid);
                s.display = 'block';
                s.left = p.x + tc.mx + 'px';
                s.top = p.y + tc.my + 24 + 'px';
                tc.tttimer = null;
            }, tc.tooltipDelay);
        }
    } else {
        s.display = 'none';
    }
};
TCproto.Animate = function(w,h) {
    var tc = this, x = tc.mx, y = tc.my, l = tc.lock, s, ay, ap, r;
    if(x >= 0 && y >= 0 && x < w && y < h)
    {
        s = tc.maxSpeed, r = tc.reverse ? -1 : 1;
        if(l != 'x')
            this.yaw = r * ((s * 2 * x / w) - s);
        if(l != 'y')
            this.pitch = r * -((s * 2 * y / h) - s);
        this.initial = null;
    }
    else if(!tc.initial)
    {
        s = tc.minSpeed, ay = abs(tc.yaw), ap = abs(tc.pitch);
        if(l != 'x' && ay > s)
            this.yaw = ay > tc.z0 ? tc.yaw * tc.decel : 0;
        if(l != 'y' && ap > s)
            this.pitch = ap > tc.z0 ? tc.pitch * tc.decel : 0;
    }
};
TCproto.Zoom = function(r) {
    this.z2 = this.z1 * (1/r);
    this.drawn = 0;
};
TCproto.Clicked = function(e) {
    var t = this.taglist, a = this.active;
    try {
        if(a && t[a.index])
            t[a.index].Clicked(e);
    } catch(ex) {
    }
};
TCproto.Wheel = function(i) {
    var z = this.zoom + this.zoomStep * (i ? 1 : -1);
    this.zoom = min(this.zoomMax,max(this.zoomMin,z));
    this.Zoom(this.zoom);
};
TagCanvas.Start = function(id,l,o) {
    TagCanvas.tc[id] = new TagCanvas(id,l,o);
};

TagCanvas.tc = {};
TagCanvas.options = {
z1: 20000,
z2: 20000,
z0: 0.0002,
freezeActive: false,
activeCursor: 'pointer',
pulsateTo: 1,
pulsateTime: 3,
reverse: false,
depth: 0.5,
maxSpeed: 0.05,
minSpeed: 0,
decel: 0.95,
interval: 20,
minBrightness: 0.1,
outlineColour: '#ffff99',
outlineThickness: 2,
outlineOffset: 5,
outlineMethod: 'outline',
textColour: '#ff99ff',
textHeight: 15,
textFont: 'Helvetica, Arial, sans-serif',
shadow: '#000',
shadowBlur: 0,
shadowOffset: [0,0],
initial: null,
hideTags: true,
zoom: 1,
weight: false,
weightMode: 'size',
weightFrom: null,
weightSize: 1,
weightGradient: {0:'#f00', 0.33:'#ff0', 0.66:'#0f0', 1:'#00f'},
txtOpt: true,
txtScale: 2,
frontSelect: false,
wheelZoom: true,
zoomMin: 0.3,
zoomMax: 3,
zoomStep: 0.05,
shape: 'sphere',
lock: null,
tooltip: null,
tooltipDelay: 300,
tooltipClass: 'tctooltip'
};
for(i in TagCanvas.options) TagCanvas[i] = TagCanvas.options[i];
window.TagCanvas = TagCanvas;
})();

第二种:使用setInterval+定位

<template>
  <div>
    <!-- <marquee direction="left" scrollamount="4"> -->
    <svg style="" :width="width" :height="height">
      <a class="fontA" v-for="(tag, index) in tags" :key="`tag-${index}`">
        <text
          :id="tag.id"
          :x="tag.x"
          :y="tag.y"
          :font-size="20 * (600 / (600 - tag.z))"
          :fill-opacity="(400 + tag.z) / 600"
          @mousemove="listenerMove($event)"
          @mouseout="listenerOut($event)"
          @click="clickToPage"
        >
        <!-- <marquee direction="left" scrollamount="4"> -->
          {{ tag.text }}
        <!-- </marquee> -->
        </text>
      </a>
    </svg>
    <!-- </marquee> -->
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: [String, Number],
      default: '250'
    },
    height: {
      type: [String, Number],
      default: '140'
    },
    RADIUS: {
      // 球的半径
      type: Number,
      default: 180
    }
  },
  name: 'word-cloud',
  // 数据,宽,高,半径,半径一般位宽高的一半。
  // props: ["data", "width", "height", "RADIUS"],
  data () {
    return {
      tagsNum: 0, // 标签数量
      // speedX: 0,
      speedX: Math.PI / 360 / 8, // 球一帧绕x轴旋转的角度,(5.5)数值越大,速度越小
      speedY: Math.PI / 360 / 4.5, // 球-帧绕y轴旋转的角度
      // speedY: 0,
      tags: [],
      data: [
        '优比速包裹运送(广东)公司深圳分公司',
        '深圳大疆有限公司',
        '深圳市智谷天厨科技有限公司',
        '深圳市九策有限公司',
        '天津麟才教育咨询有限公司',
        '河南薪火传承数字科技有限公司',
        '深圳易马达科技有限公司',
        '成都金鼎美庭建筑装饰工程有限公司',
        '广平县永信财税服务有限公司',
        '深圳市葡海祥光科技有限公司',
        '西安市公共交通集团有限公司',
        '西安市西蓝天然气股份有限公司',
        '陕西省物流集团有限责任公司',
        '陕西省水务集团有限公司',
        '国网山西省电力公司',
        '陕西省引汉济渭工程建设有限公司',
        '陕西省大数据集团',
        '陕西省恒立建设集团',
        '云基华海信息技术'
      ],
      timer: null
    }
  },
  computed: {
    CX () {
      // 球心x坐标
      return this.width / 2
    },
    CY () {
      // 球心y坐标
      return this.height / 2
    }
  },
  created () {
    this.initData()
  },
  methods: {
    // 初始化数据
    initData () {
      // 初始化标签位置
      const tags = []
      this.tagsNum = this.data.length
      for (let i = 0; i < this.data.length; i++) {
        const tag = {}
        const k = -1 + (2 * (i + 1) - 1) / this.tagsNum
        const a = Math.acos(k)
        const b = a * Math.sqrt(this.tagsNum * Math.PI) // 计算标签相对于球心的角度
        tag.text = this.data[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.id = i // 给标签添加id
        tags.push(tag)
        // console.log(tag);
      }
      this.tags = tags // 让vue替我们完成视图更新
    },
    // 纵向旋转
    rotateX (angleX) {
      var cos = Math.cos(angleX)
      var sin = Math.sin(angleX)
      for (const 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 (const 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
      }
    },
    // 运动函数
    runTags () {
      if (typeof this.timer === 'number') {
        clearInterval(this.timer)
        this.timer = null
      }
      const timer = setInterval(() => {
        this.rotateX(this.speedX)
        this.rotateY(this.speedY)
      }, 16)
      this.timer = timer
    },
    // 监听移入事件
    listenerMove (e) {
      if (e.target.id) {
        clearInterval(this.timer)
      }
    },
    // 监听移出事件
    listenerOut (e) {
      if (e.target.id) {
        this.runTags()
      }
    },
    // 点击事件
    clickToPage () {}
  },
  mounted () {
    this.runTags()
  }
}
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100%;
  position: relative;
  /* overflow: hidden; */
  border: 1px solid red;
}
.fontA {
  fill: #60cae9;
  font-weight: bold;
  border: 1px solid green;
}
.fontA:hover {
  fill: #ffffff;
  cursor: pointer;
}
</style>

第三种:使用marquee + 定位

<template>
  <div>
    <div
      class="wrap"
      style="background-color: transparent;"
      :width="width"
      :height="height"
    >
      <div
        class="fontA"
        v-for="(tag, index) in tags"
        :key="`tag-${index}`"
        :id="tag.id"
        :style="{
          position: 'absolute',
          left: tag.x + 'px',
          top: tag.y + 'px',
          color: '#80c7fd',
          'font-size': 16 * (600 / (600 - tag.z))+ 'px',
          'opacity': (400 + tag.z) / 400,
        }"
      >
        <marquee direction="left" scrollamount="4">
          {{ tag.text }}
        </marquee>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: [String, Number],
      default: '250'
    },
    height: {
      type: [String, Number],
      default: '140'
    },
    RADIUS: {
      // 球的半径
      type: Number,
      default: 180
    }
  },
  name: 'word-cloud',
  // 数据,宽,高,半径,半径一般位宽高的一半。
  // props: ["data", "width", "height", "RADIUS"],
  data () {
    return {
      tagsNum: 0, // 标签数量
      // speedX: 0,
      speedX: Math.PI / 360 / 8, // 球一帧绕x轴旋转的角度,(5.5)数值越大,速度越小
      speedY: Math.PI / 360 / 4.5, // 球-帧绕y轴旋转的角度
      // speedY: 0,
      tags: [],
      data: [
        '优比速包裹运送(广东)公司深圳分公司',
        '深圳大疆有限公司',
        '深圳市智谷天厨科技有限公司',
        '深圳市九策有限公司',
        '天津麟才教育咨询有限公司',
        '河南薪火传承数字科技有限公司',
        '深圳易马达科技有限公司',
        '成都金鼎美庭建筑装饰工程有限公司',
        '广平县永信财税服务有限公司',
        '深圳市葡海祥光科技有限公司',
        '西安市公共交通集团有限公司',
        '西安市西蓝天然气股份有限公司',
        '陕西省物流集团有限责任公司',
        '陕西省水务集团有限公司',
        '国网山西省电力公司',
        '陕西省引汉济渭工程建设有限公司',
        '陕西省大数据集团',
        '陕西省恒立建设集团',
        '云基华海信息技术'
      ],
      timer: null
    }
  },
  computed: {
    CX () {
      // 球心x坐标
      return this.width / 2
    },
    CY () {
      // 球心y坐标
      return this.height / 2
    }
  },
  created () {
    this.initData()
  },
  methods: {
    // 初始化数据
    initData () {
      // 初始化标签位置
      const tags = []
      this.tagsNum = this.data.length
      for (let i = 0; i < this.data.length; i++) {
        const tag = {}
        const k = -1 + (2 * (i + 1) - 1) / this.tagsNum
        const a = Math.acos(k)
        const b = a * Math.sqrt(this.tagsNum * Math.PI) // 计算标签相对于球心的角度
        tag.text = this.data[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.id = i // 给标签添加id
        tags.push(tag)
        // console.log(tag);
      }
      this.tags = tags // 让vue替我们完成视图更新
    },
    // 纵向旋转
    rotateX (angleX) {
      var cos = Math.cos(angleX)
      var sin = Math.sin(angleX)
      for (const 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 (const 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
      }
    },
    // 运动函数
    runTags () {
      if (typeof this.timer === 'number') {
        clearInterval(this.timer)
        this.timer = null
      }
      const timer = setInterval(() => {
        this.rotateX(this.speedX)
        this.rotateY(this.speedY)
      }, 16)
      this.timer = timer
    }
  },
  mounted () {
    // this.runTags()
  }
}
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100%;
  position: relative;
  /* overflow: hidden; */
  border: 1px solid red;
}
.fontA {
  fill: #62cbeb;
  font-weight: bold;
  border: 1px solid green;
}
.fontA:hover {
  fill: #ffffff;
  cursor: pointer;
}
</style>

总结:

1、使用setInterval+定位+svg实现的方式,页面滚动速度慢时会有轻微抖动出现。2、使用marguee+定位实现没有抖动且方向、速度也可以控制,但是页面初次渲染会有一点点空白,因为元素还没有滚动出来。3、使用tagcanvas实现的效果比较好些,没有抖动,速度、方向等也可以控制。