<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;
}
【无标题】ANTV G6 字段级
最新推荐文章于 2025-05-13 11:29:26 发布