G6文件配置____自定义线条以及自定义节点

最新推荐文章于 2024-05-23 21:31:49 发布

九情

最新推荐文章于 2024-05-23 21:31:49 发布

阅读量1.7k

点赞数 1

文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/qq_43597212/article/details/126462820

版权

本文展示了如何在G6图表库中自定义线条样式和节点内容，通过代码块提供了实现效果的示例，适用于前端开发者进行动态生成节点的场景。

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

效果图

在这里插入图片描述

代码块

<template>
  <div>
    <div :id="id"></div>
  </div>
</template>

<script>
import G6 from "@antv/g6";
export default {
   
  name: "g6Node1",
  props: ["data", "biaoShiFu", "indexValue"],
  data() {
   
    return {
   
      id: "0",
      idValue: 0
    };
  },
  watch: {
   
    idValue(newQuestion, oldQuestion) {
   
      console.log(oldQuestion, newQuestion);
      // return newQuestion;
    }
  },

  mounted() {
   
    // console.log('id',this.biaoShiFu)
    // this.id = this.biaoShiFu['id']
    // window.addEventListener('setItemEvent', function(e) {
   
    // const newdata = JSON.parse(e.newValue)
    //  console.log('值改变了',newdata)
    //  this.idValue = newdata;
    //  console.log('_id',this.idValue)
    // })
    console.log("22222222222222222222", this.indexValue);
    this.id = "g6_" + this.indexValue;
    this.render();
    console.log("id", this.id);
  },
  methods: {
   
    render() {
   
      // let _this = this;
      // window.addEventListener("setItemEvent", function (e) {
   
      //     const newdata = JSON.parse(e.newValue);
      //     console.log("值改变了", newdata);
      //     this.idValue = newdata;
      //     console.log("_id", this.idValue);
      // if (this.id == 0) {
   

      //     let G6Init = {
   
      //         // container: 'contentLeftTwo', // 指定图画布的容器 id，与第 9 行的容器对应
      //         // 画布宽高
      //         container: '0',
      //         renderer: "svg",
      //         width: 800,
      //         height: 500
      //     }
      //     alert(1);
      //     this.g6Init(G6Init);
      // } else if (this.id == 1) {
   
      //     // _this.id = "def";
      //     let G6Init = {
   
      //         // container: 'contentLeftTwo', // 指定图画布的容器 id，与第 9 行的容器对应
      //         // 画布宽高
      //         container: '1',
      //         renderer: "svg",
      //         width: 800,
      //         height: 500
      //     }
      //     this.g6Init(G6Init);
      // } else if (this.id == 2) {
   
      //     // _this.id = "ghi";

      //     let G6Init = {
   
      //         // container: 'contentLeftTwo', // 指定图画布的容器 id，与第 9 行的容器对应
      //         // 画布宽高
      //         container: '2',
      //         renderer: "svg",
      //         width: 800,
      //         height: 500
      //     }
      //     this.g6Init(G6Init);
      // }

      // });
      // console.log("idValue", this.idValue);

      // console.log("2222id", this.id);

      //  console.log(_this.biaoShiFu['id'])

      setTimeout(() => {
   
        this.g6Init();
      }, 1000);
    },
    g6Init() {
   
      let that = this;
      G6.registerNode("dom-node-1", {
   
        draw(cfg, group) {
   
          console.log("cfg", cfg);

          return group.addShape("dom", {
   
            attrs: {
   
              width: cfg.size[0],
              height: cfg.size[1],
              html: `<div>   
              
              <div style="height:100%;width:100%;position:relative;margin-bottom:10px;">
                <div style=" padding: 4px;width:120px;height:36px;background-color:${
     
                  cfg.style.fill
                };border-radius:10px;">
                <div style="margin-top:-1px;text-align: center;border-radius:10px;border:1px solid #fff;background-color:${
     
                  cfg.style.fill
                };height:100%;width:100%;">
                 <div style="text-align:center;">
                 
                  <div> ${
     cfg.id}</div>
                  <div>${
     2}</div>
                 </div>
                 </div>
                </div>
                    <div style="width: 38px;
                      height: 38px; 
                      background-color: #AFD4F7;
                      border-radius: 50%;
                      position: absolute;
                      top: 50%;
                      right: 0;
                      margin-top: -22px;
                      margin-right: 4px;
                      background-color: #fff;
                      padding:3px;
                      ">
                      <div style="margin-top: -2px;margin-left:-2px;width:100%;height:100%;border:2px solid ${
     
                        cfg.style.fill
                      };border-radius: 50