vue数据转树状图最终进阶（三级柱状图）

最新推荐文章于 2024-06-19 16:00:41 发布
最新推荐文章于 2024-06-19 16:00:41 发布
阅读量126 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42192641/article/details/133019062
版权 
let data = [
    {
      "uuid": "055E4E4ED00C08F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "61ee5c10ff8f4d69b4c43faf991ba794",
      "teacherId": null,
      "studentName": "测试0821-22",
      "examTime": "2023-09-15 11:30:48",
      "score": 90,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00B08F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "1",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "06dbe55e530449adb8babea12048af79",
      "teacherId": null,
      "studentName": "鹿邑",
      "examTime": "2023-09-15 11:30:48",
      "score": 89,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00A08F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "2",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "d0a8c90d5e1746f6a6aa279136a3ee0d",
      "teacherId": null,
      "studentName": "TEST",
      "examTime": "2023-09-15 11:30:48",
      "score": 86,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00108F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "2",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "002E0518DD4E74F2E065000000000001",
      "teacherId": null,
      "studentName": "李松",
      "examTime": "2023-09-15 11:30:48",
      "score": 100,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00208F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "002E0518DD4F74F2E065000000000001",
      "teacherId": null,
      "studentName": "王珂",
      "examTime": "2023-09-15 11:30:48",
      "score": 80,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00908F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "23b7e94695ef49cc860ca32fd60d795d",
      "teacherId": null,
      "studentName": "阮琳",
      "examTime": "2023-09-15 11:30:48",
      "score": 75,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00708F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "4a23ca64dff74580b149fa5dbb402bb1",
      "teacherId": null,
      "studentName": "蔡虎虎",
      "examTime": "2023-09-15 11:30:48",
      "score": 80,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00408F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "be083f6f10bc4168b6d04106f14b5b68",
      "teacherId": null,
      "studentName": "金葵花",
      "examTime": "2023-09-15 11:30:48",
      "score": 100,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00508F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "403ab08d05f44c9d84e479fe0f1f0d8a",
      "teacherId": null,
      "studentName": "汪雪",
      "examTime": "2023-09-15 11:30:48",
      "score": 75,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00608F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "F6D8BE2B9FCD6B8AE055000000000001",
      "teacherId": null,
      "studentName": "赵六",
      "examTime": "2023-09-15 11:30:48",
      "score": 87,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00308F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "002E0518DD5074F2E065000000000001",
      "teacherId": null,
      "studentName": "万虎",
      "examTime": "2023-09-15 11:30:48",
      "score": 90,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "055E4E4ED00808F7E065000000000001",
      "planId": "f3fc22fda5c64bdd98dbf35c9aa4eaa1",
      "project": "TEST0909_1531",
      "trainId": "0909_1531",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "81686d4bf5684f57a2a55b275527b02b",
      "teacherId": null,
      "studentName": "孙三",
      "examTime": "2023-09-15 11:30:48",
      "score": 85,
      "courseId": null,
      "courseName": "雷达管制",
      "scoreType": "2",
      "saveTime": "2023-09-15 11:22:44",
      "practicalScoreList": null
    },
    {
      "uuid": "ed57f4693f934d4e831c0c36b9333eb4",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": "1",
      "studentId": "F6D8BE2B9FCD6B8AE055000000000001",
      "teacherId": null,
      "studentName": "赵六",
      "examTime": "2023-08-21 13:55:09",
      "score": 86,
      "courseId": null,
      "courseName": "数学课",
      "scoreType": "1",
      "saveTime": "2023-08-21 13:48:43",
      "practicalScoreList": null
    },
    {
      "uuid": "3abc30e068ad402d9aa6e0cac95c92d0",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": "7",
      "studentId": "F6D8BE2B9FCD6B8AE055000000000001",
      "teacherId": null,
      "studentName": "赵六",
      "examTime": "2023-08-21 13:52:53",
      "score": 85,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "1",
      "saveTime": "2023-08-21 13:47:22",
      "practicalScoreList": null
    },
    {
      "uuid": "0367A734EA662AE2E065000000000001",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "F6D8BE2B9FCD6B8AE055000000000001",
      "teacherId": null,
      "studentName": "赵六",
      "examTime": "2023-08-21 13:51:52",
      "score": 81,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-21 13:45:09",
      "practicalScoreList": null
    },
    {
      "uuid": "0367A734EA6A2AE2E065000000000001",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "236690bf31504e9f85b3c442a843fa7d",
      "teacherId": null,
      "studentName": "测试0821-333",
      "examTime": "2023-08-21 13:51:52",
      "score": 70,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-21 13:45:09",
      "practicalScoreList": null
    },
    {
      "uuid": "0367A734EA692AE2E065000000000001",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "adb8d5b000164402b853d6f2f40b7b95",
      "teacherId": null,
      "studentName": "测试0821-222",
      "examTime": "2023-08-21 13:51:52",
      "score": 90,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-21 13:45:09",
      "practicalScoreList": null
    },
    {
      "uuid": "0367A734EA682AE2E065000000000001",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "d54d97c1550c422ca0e163c132389ee5",
      "teacherId": null,
      "studentName": "测试0821-111",
      "examTime": "2023-08-21 13:51:52",
      "score": 80,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-21 13:45:09",
      "practicalScoreList": null
    },
    {
      "uuid": "0367A734EA672AE2E065000000000001",
      "planId": "dcf44c6f3cde454fa50116aebff08b6e",
      "project": "测试0821",
      "trainId": "px-2023-0821",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "fec1d3cb91cc4dc89a38d4b2935a6e93",
      "teacherId": null,
      "studentName": "测试0821-11",
      "examTime": "2023-08-21 13:51:52",
      "score": 75,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-21 13:45:09",
      "practicalScoreList": null
    },
    {
      "uuid": "6b6f4c2d69f64c019ee6baae5bc2cb1d",
      "planId": "e90a05335e584824947cb8cd4ad461e0",
      "project": "测试0809",
      "trainId": "0809",
      "theoryScoreList": null,
      "content": null,
      "template": "3",
      "studentId": "002E0518DD5074F2E065000000000001",
      "teacherId": null,
      "studentName": "万虎",
      "examTime": "2023-08-16 09:33:26",
      "score": 75,
      "courseId": null,
      "courseName": "雷达课三",
      "scoreType": "1",
      "saveTime": "2023-08-16 09:26:32",
      "practicalScoreList": null
    },
    {
      "uuid": "d8daa8186d7b418fa065ff8849855565",
      "planId": "e388d9d8963841679e9b3c9333b51a2e",
      "project": "hhh",
      "trainId": "yyy",
      "theoryScoreList": null,
      "content": null,
      "template": "1",
      "studentId": "6beaf14ef31c41fda8d3ca6d21547b76",
      "teacherId": null,
      "studentName": "测试08114-4",
      "examTime": "2023-08-16 08:00:00",
      "score": 89,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "1",
      "saveTime": "2023-08-16 09:25:43",
      "practicalScoreList": null
    },
    {
      "uuid": "0f794209fb154ee4b561a9c03452b343",
      "planId": "19894240b47b4afd82ff18955f53333c",
      "project": "CESHI",
      "trainId": "ceshi",
      "theoryScoreList": null,
      "content": null,
      "template": "7",
      "studentId": "002E0518DD4E74F2E065000000000001",
      "teacherId": null,
      "studentName": "李松",
      "examTime": "2023-08-16 08:00:00",
      "score": 100,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "1",
      "saveTime": "2023-08-16 09:24:29",
      "practicalScoreList": null
    },
    {
      "uuid": "0300ACD0D2867BE0E065000000000001",
      "planId": "19894240b47b4afd82ff18955f53333c",
      "project": "CESHI",
      "trainId": "ceshi",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "002E0518DD4E74F2E065000000000001",
      "teacherId": null,
      "studentName": "李松",
      "examTime": "2023-08-16 09:28:49",
      "score": 88,
      "courseId": null,
      "courseName": "英语课",
      "scoreType": "2",
      "saveTime": "2023-08-16 09:21:57",
      "practicalScoreList": null
    },
    {
      "uuid": "0300A60532757C6BE065000000000001",
      "planId": "f590b85ba0a944e381514386298c4038",
      "project": "2023第4期气象培训",
      "trainId": "PX-2023-04",
      "theoryScoreList": null,
      "content": null,
      "template": "5",
      "studentId": "002E0518DD4E74F2E065000000000001",
      "teacherId": null,
      "studentName": "李松",
      "examTime": "2023-08-16 08:00:00",
      "score": 0,
      "courseId": null,
      "courseName": "程序管制理论",
      "scoreType": "1",
      "saveTime": "2023-08-16 08:48:05",
      "practicalScoreList": null
    },
    {
      "uuid": "0300A60532747C6BE065000000000001",
      "planId": "b6fbfe48ffa041d8ba534ed57fe5a5cb",
      "project": "TEST20230810",
      "trainId": "20230810",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "FF943A3340374CA2E055000000000001",
      "teacherId": null,
      "studentName": "李四",
      "examTime": "2023-08-11 00:00:00",
      "score": 92,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-16 08:48:05",
      "practicalScoreList": null
    },
    {
      "uuid": "0300A60532737C6BE065000000000001",
      "planId": "e0d53949dd1346cfa0f2ae4995b96ef1",
      "project": "TEST0814_02",
      "trainId": "0814_02",
      "theoryScoreList": null,
      "content": null,
      "template": null,
      "studentId": "FF943A3340364CA2E055000000000001",
      "teacherId": null,
      "studentName": "张三",
      "examTime": "2023-08-12 00:00:00",
      "score": 90,
      "courseId": null,
      "courseName": "气象课",
      "scoreType": "2",
      "saveTime": "2023-08-16 08:48:05",
      "practicalScoreList": null
    }]
// 深拷贝
function deepClone(data) {
  let dataType = getDataType(data);
  let container;
  if (dataType === 'Object') {
    container = {};
  }
  if (dataType === 'Array') {
    container = [];
  }
  for (const key in data) {
    let type = getDataType(data[key]);
    if (key === 'Array' || type === 'Object') {
      container[key] = deepClone(data[key]);
    } else {
      container[key] = data[key];
    }
  }
  return container;
}
// 判断数据类型
function getDataType(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

function generateRandomString(length) {
  let result = '';
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const charactersLength = characters.length;
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * charactersLength);
    result += characters.charAt(randomIndex);
  }
  return result;
}

function addCourseId(data){
  const courseMap = {}; // 创建一个映射对象，将 courseName 映射到唯一的 courseId

// 遍历 data 数组
  for (const item of data) {
    const courseName = item.courseName;
    // 如果 courseName 不在映射中，则为其分配一个新的 courseId（字符串形式）
    if (!courseMap[courseName]) {
      courseMap[courseName] = generateRandomString(30);
    }
    // 将映射中的 courseId 赋值给对象的 courseId 属性
    item.courseId = courseMap[courseName];
  }
  return data
}

function addProCourseScoreType(data){
  // 添加courseId
  data = addCourseId(data);
  // 添加一级父节点(project)
  var afterDeptList = []; // 找项目名
  var afterTeaData = []; // 将父节点添加进去
  for (let item of data) {
    if (!afterDeptList.includes(item.planId)) { // 如果这个项目id没有出现过，就把项目id第一个放进去
      afterDeptList.push(item.planId);
      let project = item.project + '(' + item.trainId + ')';
      // 添加一个该项目第一次出现的父节点
      afterTeaData.push({ uuid: item.planId, pid: '0', project: project, trainId: item.trainId, isParent: '1' });
      item.pid = item.planId;
    } else {
      item.pid = item.planId; //父节点出现了，给子节点添加一个索引
    }
  }
  data = [...afterTeaData, ...data];
  // 添加二级父节点(teacher)
  let result2 = [],
      courseList = [];
  for (let item of data) {
    if (item.pid != '0') { // 如果pid不是0 那么说明有父节点
      let courseId = item.courseId;
      let planId = item.planId;
      let pid = planId + courseId; // 项目名+teacher名
      if (courseList.includes(pid)) { // 发现这个项目了
        item.pid = pid;
        item.project = item.courseName;
        result2.push(item);
      } else {
        courseList.push(pid);
        result2.push({ uuid: pid, pid: item.planId, project: item.courseName, isParent: '1' });
        //构造日期下的第一个节点
        let temp = deepClone(item);
        temp.pid = pid;
        temp.project = temp.courseName;
        result2.push(temp);
      }
    } else {
      result2.push(item);
    }
  }
  // 添加三级父节点
  let result3 = [],
      scoreTypeList = [];
  for(let item of result2){
    if (item.isParent != '1') {
      let ScoreTypeId = item.scoreType;
      let planId = item.planId;
      let courseId = item.courseId;
      let pid = planId + courseId + ScoreTypeId;
      let pid2 =  planId + courseId;
      if (scoreTypeList.includes(pid)) {
        item.pid = pid;
        item.project = item.studentName;
        result3.push(item);
      } else {
        scoreTypeList.push(pid);
        result3.push({ uuid: pid, pid: pid2, project: item.scoreType, isParent: '1' });
        //构造日期下的第一个节点
        let temp = deepClone(item);
        temp.pid = pid;
        temp.project = temp.studentName;
        result3.push(temp);
      }
    } else {
      result3.push(item);
    }
  }
  return result3
}


function getDeptTreeCustom(data, pid, idField, pidField) {
  if (typeof idField == 'undefined') {
    idField = 'id';
  }
  if (typeof pidField == 'undefined') {
    pidField == 'pid';
  }
  const result = [];
  let temp;
  for (let i = 0; i < data.length; i++) {
    if (data[i][pidField] === pid) { // 如果元素的pid==0
      temp = getDeptTreeCustom(data, data[i][idField], idField, pidField);
      if (temp.length > 0) {
        data[i].children = temp;
      }
      result.push(data[i]);
    }
  }
  return result;
}

let y = addProCourseScoreType(data)
let all = getDeptTreeCustom(y,'0', 'uuid', 'pid')
console.log(all)

Rrar
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vuejs-treemap:Vuejs + D3可缩放树状图
05-12
Vuejs + D3可缩放树状图 在Vuejs中将更新为d3v4的实现。 演示版 是的。 。 依存关系 （> = 4.x，首选6.x）和npm 3+版本。 （6.x） 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test
vue3树状图，树状关系图
weixin_60623799的博客
12-26 1174
vue3树状关系图，树状图展开隐藏，树状图点开收起
如何用Vue3构建一个交互式树状图
最新发布
ScriptEcho的博客
06-19 478
在在seriesdata: [],},data: [],},开发这段代码的过程让我对 Vue 3 ApexCharts 组件有了更深入的了解。它提供了丰富的功能，使可视化多维数据变得容易。未来，该组件可以进一步扩展和优化，例如：支持交互式功能，如缩放、平移和钻取。集成其他数据源，如 API 或数据库。提供更高级的定制选项，如自定义形状和颜色映射。更多组件：获取更多Echos本文由ScriptEcho平台提供技术支持传送门。
Vue3使用echarts树图（tree）
Mr Dear的博客
04-19 5195
Vue3+TS使用echarts树图
在vue中使用d3做一个动态加载的树形图
hello world
08-12 2240
树形图数据量可能会很大，一次性全部加载可能会有延迟，所以一开始只加载一层节点的数据，当我们点击节点去展开的子节点的时候，再通过请求去加载子节点的数据，并更新到树上 本demo中还添加了放大缩小、点击节点居中的功能，参考链接http://www.jq22.com/yanshi21370 注意：本demo用的d3版本是v3，用最新版有些功能无法使用 <script src="https://d3js.org/d3.v3.min.js"></script> 效果图
vue3使用echarts做树图tree
Dnn01的博客
04-28 1505
vue3使用echarts做树图tree
springboot echarts vue 柱状图
01-25
在本项目中，我们结合了SpringBoot、Vue和ECharts三个技术栈，旨在实现一个后端数据驱动的前端柱状图展示。以下是关于这些技术及其整合应用的详细知识点： 1. **SpringBoot**： SpringBoot是Spring框架的一个简化...
vue自定义树状结构图的实现方法
01-18
vue 实现自定义树状结构图 可动态添加、删除 可整体拖拽 如需内容也为动态，把组件内容使用input、select等组件替换 数据结构 treeData: [{ name: '1', child: [ { name: '2', child: [{ name: '1' }, { ...
vue-echart柱状图 案例代码分享
01-07
引言：因笔者在项目中只用到了柱状图，此处仅分享柱状图的案例代码，使用的是vue-echarts，涉及到数据请求，柱状图渲染，简化的鼠标经过显示数据内容，以及鼠标点击柱形图某个柱子的事件代码。 正文： 1、安装vue-...
vue总100%占比柱状图.rar
12-14
自己写的一些基于vued的简单组件，喜欢的就拿走 ... ,background:'#27e299',left:'0px'}">值1：{{ this.test }} ... ,background:'#fe8455',left:'-20px'}">值2：{{ this.test1 }} ... </div>
vue+三维GIS地图
12-08
此实例为vue版本三维GIS地图，其中包含底图切换、图层控制、图上量算、空间分析、坐标定位、图上标绘、地图打印等功能
VUE 实现树形结构
10-08
vue 树形结构 添加删除节点 返回ID 可同步到服务器 treelist组件
VueOrgChart一个对树形组织图OrgChartjs封装并修改的Vue2x组件
08-08
Vue-OrgChart: 一个对树形组织图OrgChart.js封装并修改的Vue2.x组件
vue数字阶梯排序动画特效.zip
07-11
代码片段： <div id="app"> <div class="cards"> <sort-card v-for="(card, index) in store.state.cards" :key="index" :value="card.value" :sort-index="card.sortIndex" :is-active="card.isActive" :is-locked="card.isLocked"></sort-card> </div> <div class="control-panel"> <h1>Bubble Sort Visualizer</h1> <button aria-label="Reset" v-if="store.state.done" @click="reset(SORT_ARRAY)"> <i class="fa fa-refresh" aria-hidden="true"></i> </button> </div> </div> [removed] <!-- 绑定内联样式，通过 height 和 transform 来显示不同的div --> <div class="card-wrapper" :data-sort-index="sortIndex" v-bind: value * HEIGHT_INCREMENT 'px',transform: 'translateX(' sortIndex*100 '%)'}"> <!-- 通过改变class，来改变颜色 --> <div class="card" :class="cardClassObject"> <div class="value">{{value}}</div> </div> </div> [removed]
vue树状显示图
xfd19971030的博客
04-14 2197
转载自：https://www.cnblogs.com/steamed-twisted-roll/p/10731862.html 子组件treeData.vue <template> <table v-if="treeData && treeData.partnerName"> <tr> <td :colspan="treeData.childers ? treeData.childers.length * 2 : 1" :
vue d3 svg tree树状图
czy279470138的博客
03-22 4176
用的是d3.v3 版本 展示没有问题，细节有问题。 采用的是自己的json，调接口的没有总结，太麻烦了。 下面地址是原声的，支持提示框可复制文字，并且节点之间不会重叠，tree.size 改成 tree.nodeSize 即可 https://blog.csdn.net/czy279470138/article/details/88419831 <style> ...
Vue3 组合式实现 带连接线的Tree型 架构图（一级树形图）
编码行者的博客
12-04 1463
【代码】Vue3 组合式实现 带连接线的Tree型 架构图（一级树形图）
vue项目中使用阶梯折线图
weixin_52827704的博客
02-26 689
<el-dialog title="查看趋势" :visible.sync="dialogTableVisible2" @open="openSentence()" class="reset-dialog" > <!-- View trends --> <div id="sentenceTrends" ref="sentenceTrends" style="width: 500px; h...
vue 做一个树图
学习使我快乐_玉祥
09-12 1912
{"path":"/快速访问","name":"快速访问",},]通过child无线嵌套。
vue+echarts树状图
06-08
3. 获取数据：获取需要展示的树状图数据，可以使用ajax或axios等方式进行获取。 4. 处理数据：将获取到的数据进行递归处理，生成符合echarts树状图要求的数据格式。 5. 配置echarts：设置树状图的布局、样式、节点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值