基于vue + echarts 的大数据平台监控模板

左下角词云为3D动态旋转词云

其他模块皆直接对接口即可

附带下载地址：仿联想大数据监控评测平台-Webpack文档类资源-CSDN下载

即下即用

  init() {
      const tags = document.querySelectorAll(\".tag\");
      const wrap = document.querySelector(\".tag-wrap\");

      let len = tags.length;
      let valueList = Array.from(new Set(this.data.map(i => i.value)));
      let min = Math.min(...valueList);
      CX = wrap.offsetWidth / 2;
      CY = wrap.offsetHeight / 2;

      tags.forEach((i, index) => {
        let fontScale = this.data[index].value / min * 16;
        i.style.fontSize = fontScale > 30 ? \'30px\' : fontScale + \'px\';
        i.style.color = colors[parseInt(Math.random() * 10)];

        let k = -1 + (2 * (index + 1) - 1) / len;
        let a = Math.acos(k);
        let b = a * Math.sqrt(len * Math.PI);
        let x = RADIUS * 1.15 * Math.sin(a) * Math.cos(b);
        let y = RADIUS * Math.sin(a) * Math.sin(b);
        let z = RADIUS * Math.cos(a);
        let tag = new Tag(i, x, y, z);
        this.tagList.push(tag);
      });
    },
    rotateX() {
      let angleX = Math.PI / 500;
      let cos = Math.cos(angleX);
      let sin = Math.sin(angleX);
      this.tagList.forEach(i => {
        let y1 = i.y * cos - i.z * sin;
        let z1 = i.z * cos + i.y * sin;
        i.y = y1;
        i.z = z1;
      });
    },
    rotateY() {
      let angleY = Math.PI / 500;
      let cos = Math.cos(angleY);
      let sin = Math.sin(angleY);
      this.tagList.forEach(i => {
        let x1 = i.x * cos - i.z * sin;
        let z1 = i.z * cos + i.x * sin;
        i.x = x1;
        i.z = z1;
      });
    },