【无标题】

weixin_45513781

已于 2022-04-14 15:43:28 修改

阅读量630

点赞数

文章标签： javascript vue.js

于 2022-04-14 15:42:22 首次发布

本文链接：https://blog.csdn.net/weixin_45513781/article/details/124173424

版权

本文介绍了如何在Vue.js项目中使用AntV G6库，详细阐述了如何创建自定义节点和绘制连接线，最终展示了实现的图形效果。

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

vue 使用antv g6 实现自定义节点，以及连接线


<template>
  <div class="container" ref="container">
    <!-- 创建容器 -->
    <div id="mountNode"></div>
    <div class="fixed-bottom-oper-box">
      <el-button @click.native.prevent="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import G6 from "@antv/g6";
export default {
   
  data() {
   
    return {
   
      data: {
   
        id: "99",
        No: "智信编号:YFDP20211217001-03-01",
        openBusiness: "原始开立企业:",
        openBusinessValue: "核心企业",
        assignmentBusiness: "转让企业:",
        assignmentBusinessValue: "供应商s",
        receiver: "接收方:",
        receiverValue: "供应商S2",
        amount: "智信金额(元):",
        amountValue: "300,000.000",
        balance: "智信余额(元):",
        balanceValue: "0",
        date: "确认日期:",
        dateValue: "2022-03-12",
        children: [
          {
   
            id: "100",
            No: "智信编号:YFDP20211217001-03-01",
            openBusiness: "原始开立企业:",
            openBusinessValue: "核心企业",
            assignmentBusiness: "转让企业:",
            assignmentBusinessValue: "供应商s",
            receiver: "接收方:",
            receiverValue: "供应商S2",
            amount: "智信金额(元):",
            amountValue: "300,000.000",
            balance: "智信余额(元):",
            balanceValue: "0",
            date: "确认日期:",
            dateValue: "2022-03-12",
            children: [
              {
   
                id: "101",
                No: "智信编号:YFDP20211217001-03-01",
                openBusiness: "原始开立企业:",
                openBusinessValue: "核心企业",
                assignmentBusiness: "转让企业:",
                assignmentBusinessValue: "供应商s",
                receiver: "接收方:",
                receiverValue: "供应商S2",
                amount: "智信金额(元):",
                amountValue: "300,000.000",
                balance: "智信余额(元):",
                balanceValue: "0",
                date: "确认日期:",
                dateValue: "2022-03-12",
              },
              {
   
                id: "103",
                No: "智信编号:YFDP20211217001-03-01",
                openBusiness: "原始开立企业:",
                openBusinessValue: "核心企业",
                assignmentBusiness: "转让企业:",
                assignmentBusinessValue: "供应商s",
                receiver: "接收方:",
                receiverValue: "供应商S2",
                amount: "智信金额(元):",
                amountValue: "300,000.000",
                balance: "智信余额(元):",
                balanceValue: "0",
                date: "确认日期:",
                dateValue: "2022-03-12",
              },
            ],
          },
          {
   
            id: "104",
            No: "智信编号:YFDP20211217001-03-01",
            openBusiness: "原始开立企业:",
            openBusinessValue: "核心企业",
            assignmentBusiness: "转让企业:",
            assignmentBusinessValue: "供应商s",
            receiver: "接收方:",
            receiverValue: "供应商S2",
            amount: "智信金额(元):",
            amountValue: "300,000.000",
            balance: "智信余额(元):",
            balanceValue: "0",
            date: "确认日期:",
            dateValue: "2022-03-12",
            children: [
              {