[JavaScript知识库] 基于vue + echarts 的大数据平台监控模板

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 基于vue + echarts 的大数据平台监控模板 -> 正文阅读

[JavaScript知识库]基于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;
      });
    },