<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.hierarchy-0.5.0/build/hierarchy.js"></script>
需要引入上面脚本:
<template>
<div id="mountNode"></div>
</template>
<script>
export default {
name: 'G6',
data () {
return {};
},
mounted () {
const data = require('./data.json');
this.int(data);
},
methods: {
int (data) {
const G6 = window.G6;
const COLLAPSE_ICON = function COLLAPSE_ICON (x, y, r) {
return [['M', x, y], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x + 2, y], ['L', x + 2 * r - 2, y]];
};
const EXPAND_ICON = function EXPAND_ICON (x, y, r) {
return [['M', x, y], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x + 2, y], ['L', x + 2 * r - 2, y], ['M', x + r, y - r + 2], ['L', x + r, y + r - 2]];
};
G6.registerNode('tree-node', {
drawShape: function drawShape (cfg, group) {
var rect = group.addShape('rect', {
attrs: {
fill: '#fff',
stroke: '#666'
}
});
var content = cfg.name.replace(/(.{19})/g, '$1\n');
var text = group.addShape('text', {
attrs: {
text: content,
x: 0,
y: 0,
textAlign: 'left',
textBaseline: 'middle',
fill: '#666'
}
});
var bbox = text.getBBox();
var hasChildren = cfg.children && cfg.children.length > 0;
if (hasChildren) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 6,
y: bbox.minX + bbox.height / 2 - 6,
r: 6,
symbol: COLLAPSE_ICON,
stroke: '#666',
lineWidth: 2
},
className: 'collapse-icon'
});
}
rect.attr({
x: bbox.minX - 4,
y: bbox.minY - 6,
width: bbox.width + (hasChildren ? 26 : 8),
height: bbox.height + 12
});
return rect;
}
}, 'single-shape');
var graph = new G6.TreeGraph({
container: 'mountNode',
width: window.innerWidth,
height: window.innerHeight,
modes: {
default: [{
type: 'collapse-expand',
onChange: function onChange (item, collapsed) {
var data = item.get('model');
var icon = item.get('group').findByClassName('collapse-icon');
if (collapsed) {
icon.attr('symbol', EXPAND_ICON);
} else {
icon.attr('symbol', COLLAPSE_ICON);
}
data.collapsed = collapsed;
return true;
}
}, 'drag-canvas', 'zoom-canvas']
},
defaultNode: {
shape: 'tree-node',
anchorPoints: [[0, 0.5], [1, 0.5]]
},
defaultEdge: {
shape: 'cubic-horizontal',
style: {
stroke: '#A3B1BF'
}
},
layout: {
type: 'compactBox',
direction: 'LR',
getId: function getId (d) {
return d.id;
},
getHeight: function getHeight () {
return 16;
},
getWidth: function getWidth () {
return 16;
},
getVGap: function getVGap () {
return 20;
},
getHGap: function getHGap () {
return 80;
}
}
});
G6.Util.traverseTree(data, item => item.id = item.name);
graph.data(data);
graph.render();
graph.fitView();
}
}
};
</script>
<style>
</style>