vue项目实现G6双向树状图最详细教程

最新推荐文章于 2024-09-13 07:32:46 发布

JIAVIS

最新推荐文章于 2024-09-13 07:32:46 发布

阅读量4.1k

点赞数 3

文章标签： vue.js 前端 npm javascript

本文链接：https://blog.csdn.net/JIAVIS/article/details/121054657

版权

本文详细介绍了如何在Vue项目中通过NPM包引入AntV G6，展示了双向树状图的示例，并提供具体vue文件的代码实现，引导读者参考AntV官方文档进行更深入学习。

摘要由CSDN通过智能技术生成

在项目中使用 NPM 包引入

npm install --save @antv/g6

AntV G6 示例图

初始化数据
在这里插入图片描述

点击节点动态加入数据
在这里插入图片描述

上代码(vue 文件)

<template>
<!-- g6 容器 -->
<!-- 以防数据量过大,加载速度慢,引入 element ui 的 loading -->
  <div 
   id="container"
   v-loading="loading" 
   element-loading-text="加载中..."
   element-loading-background="rgba(0, 0, 0, 0.8)"
  ></div>
</template>
<script>
// 导入 G6
import G6 from '@antv/g6';
// 导入 api 后台数据
import {
    PostGraph } from "../../api/index";

export default {
   
  data() {
   
    return {
   
      data: {
   
        id:'1',
        nood: 0,
        direction: 0,
        children: [ // 子集
          {
   
            id: "11",
            nood: 2, // 0:主节点, 1:统计节点, 2:普通节点
            direction: 1, // 0:主节点, 1:向左展开, 2:向右展开
            isSpread: false, // 有无子集
            text1: 'text11111',
            text2: "text2222222222",
            text3: "text33333333333333333333333333333",
            url: "https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg",
          },
          {
   
            id: "12",
            nood: 2,
            direction: 1,
            isSpread: false,
            text1: 'text11111',
            text2: "text2222222222",
            text3: "text33333333333333333333333333333",
            url: "https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg",
          },
          {
   
            id: "13",
            nood: 2,
            direction: 1,
            isSpread: false,
            text1: 'text11111',
            text2: "text2222222222",
            text3: "text33333333333333333333333333333",
            url: "https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg",
          },
          {
   
            id: "14",
            nood: 2,
            direction: 1,
            isSpread: false,
            text1: 'text11111',
            text2: "text2222222222",
            text3: "text33333333333333333333333333333",
            url: "https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg",
          },
          {
   
            id: "16",
            nood: 2,
            direction: 2,
            isSpread: true,
            text1: 'text11111',
            text2: "text2222222222",
            text3: "text33333333333333333333333333333",
            url: "https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg",//标签url
          },
        ]
      },
      data2: {
   
        id: '2',
        nood: 1,
        direction: 2,
        value: 1111111111,
        value1: 2222,
        value2: 3333,
        children: [
          {
   
            id: "21",
            nood: 2,
            direction: 2,
            isSpread: true,
            text1: 'text11111',
            text2: "text2222222222",
            text3: "text33333333333333333333333333333",
            url: "https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg",
          },
          {
   
            id: "22",
            nood: 2,
            direction: 2,
            isSpread: true,
            text1: 'text11111',
            text2: "text2222222222",
            text3: "text33333333333333333333333333333",
            url: "https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg",
          },
        ]
      },
      loading: true,
      dataList: {
   },
      dataList2: {
   },
      id: "",
      direction: 0,
    };
  },
  created (){
   
    // this.tradeMap();
  },
  mounted () {
   
    this.tradeMap();
    // this.render();
  },
  methods: