【无标题】ANTV G6 字段级

<template>
    <div class="asset_column_g6">
        <div id="container" class="container"></div>
    </div>
</template>

<script>
import G6 from '@antv/g6';
import assetColumnDetail from './assetColumnDetail.js';
import edgeConfig from './edgeConfig'
export default {
   
   
    data() {
   
   
        return {
   
   

        }
    },
    methods: {
   
   
        initGraph() {
   
   
            const container = document.getElementById('container');
            const width = container.scrollWidth;
            const height = container.scrollHeight || 500;
            const tooltip = new G6.Tooltip({
   
   
              offsetX: 0,
              offsetY:-240,
              getContent(evt) {
   
   
                const outDiv = document.createElement('div');
                let text = evt.target.cfg.name == "expandIcon-shape" ? "展开节点信息" : "收起节点信息";
                outDiv.style.width = 'auto';
                outDiv.innerHTML = `<span style="user-select: none;">${
     
     text}</span>`
                return outDiv
              },
              shouldBegin(evt) {
   
   
                return evt.target.cfg.name == "expandIcon-shape" || evt.target.cfg.name == "collapseIcon-shape"
              },
              itemTypes: ['node']
            });
            const nodeStateStyles = {
   
   };
            const edgeStateStyles = {
   
    };
            const that = this;
            
            G6.registerNode(
              'tree-node',
              {
   
   
                draw(cfg, group) {
   
   
                  let rect_common = null;
                  rect_common = group.addShape('rect', {
   
   
                      attrs: {
   
   
                        stroke: '#333',
                        x: 0,
                        y: 0,
                        width: 150,
                        height: that.toComputeContainerHeight(cfg),
                        lineWidth: 1,
                        cursor: 'pointer',
                        // shadowColor: 'rgb(215, 216, 218)',
                        shadowColor: 'rgb(184, 185, 187)',
                        shadowBlur: 5,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2,
                        fill: 'rgb(255, 255, 255)',
                      },
                      name: 'rect_common-shape',
                    });
                  
                  that.renderAssetNameArea(group, cfg);

                  let columns = cfg.columns || [];

                  for(let i = 0; i < columns.length; i++) {
   
   
                    that.renderColumnArea(group, cfg, i);
                    that.renderColumnTxt(group, cfg, i);
                  };

                  that.renderAssetNameTitle(group, cfg);

                  
                  return rect_common
                },
              }
            );

            this.graph = new G6.TreeGraph({
   
   
              container: 'container',
              width,
              height,
              animate: false, // Boolean，切换布局时是否使用动画过度，默认为 false
              animateCfg: {
   
   
                duration: 500, // Number，一次动画的时长
                easing: 'linearEasing', // String，动画函数
              },
              modes: {
   
   
                default: [
                  'drag-canvas',
                  'zoom-canvas',
                ],
              },
              defaultNode: {
   
   
                // size: 26,
                type: 'tree-node',
                anchorPoints: [
                  [0, 0.5],
                  [1, 0.5],
                ],
              },
              defaultEdge: {
   
   
                type: 'polyline',
                style: {
   
   
                  lineWidth: 1,
                  opacity: 0,
                }
              },
              nodeStateStyles: nodeStateStyles,
              edgeStateStyles: edgeStateStyles,
              plugins: [tooltip],
              layout: {
   
   
                type: 'compactBox',
                direction: 'RL',
                getId: function getId(d) {
   
   
                  return d.id;
                },
                getHeight: function getHeight(cfg) {
   
   
                  let columns = cfg.columns || [];
                  return 15+15*(columns.length);
                },
                getWidth: function getWidth() {
   
   
                  return 150;
                }