实现效果图
实现超长...效果
const fittingString = (str, maxWidth, fontSize) => {
const ellipsis = '...'
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0]
let currentWidth = 0
let res = str
const pattern = new RegExp('[\u4E00-\u9FA5]+')
str.split('').forEach((letter, i) => {
if (currentWidth > maxWidth - ellipsisLength) return
if (pattern.test(letter)) {
currentWidth += fontSize
} else {
currentWidth += G6.Util.getLetterWidth(letter, fontSize)
}
if (currentWidth > maxWidth - ellipsisLength) {
res = `${str.substr(0, i)}${ellipsis}`
}
})
return res
}
实现Tooltip效果
const tooltip = new G6.Tooltip({
offsetX: 5,
offsetY: 5,
fixToNode: [1, 0.5],
itemTypes: ['node'],
getContent: (e) => {
const outDiv = document.createElement('div')
outDiv.style.width = 'fit-content'
outDiv.style.height = 'fit-content'
const model = e.item.getModel()
if (e.item.getType() === 'node') {
outDiv.innerHTML = `${model.label}`
return outDiv
}
}
})
完整代码
<template>
<div class="supply-relationship-container">
<div id="g6-container" class="g6-container"></div>
</div>
</template>
<script>
import G6 from '@antv/g6'
const tooltip = new G6.Tooltip({
offsetX: 5,
offsetY: 5,
fixToNode: [1, 0.5],
itemTypes: ['node'],
getContent: (e) => {
const outDiv = document.createElement('div')
outDiv.style.width = 'fit-content'
outDiv.style.height = 'fit-content'
const model = e.item.getModel()
if (e.item.getType() === 'node') {
outDiv.innerHTML = `${model.label}`
return outDiv
}
}
})
export default {
data() {
let that = this
return {
list: {
id: 'root',
label: 'root',
children: [
{
id: 'c3-2-1',
label: '34322ewqrweqrwqerwqerwerwqrwrqre',
},
{
id: 'c3-2-13333333',
label: '34322ewqrweqrwqerwqerwerwqrwrqre',
},
{
id: 'c3-2-13',
label: '34322ewqrweqrwqerwqerwerwqrwrqre',
},
{
id: 'c3-2-133',
label: '34322ewqrweqrwqerwqerwerwqrwrqre',
}
]
}
}
},
methods: {
initG6(data) {
var container = document.getElementById('g6-container')
const { Util } = G6
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const fittingString = (str, maxWidth, fontSize) => {
const ellipsis = '...'
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0]
let currentWidth = 0
let res = str
const pattern = new RegExp('[\u4E00-\u9FA5]+')
str.split('').forEach((letter, i) => {
if (currentWidth > maxWidth - ellipsisLength) return
if (pattern.test(letter)) {
currentWidth += fontSize
} else {
currentWidth += G6.Util.getLetterWidth(letter, fontSize)
}
if (currentWidth > maxWidth - ellipsisLength) {
res = `${str.substr(0, i)}${ellipsis}`
}
})
return res
}
const getTextSize = (str, maxWidth) => {
let width = G6.Util.getTextSize(str, fontSize)[0]
return width > maxWidth ? maxWidth : width
}
G6.registerNode(
'project', {
jsx: (cfg) => {
return `
<group>
<rect draggable="true" style={{
width: 100, height: 30, fill: '#FEF1CF', stroke: '#FED578', radius: [6, 6, 6, 6]
}}>
<text style={{ fontSize: 10, marginLeft: 14, marginTop: 6, overflow: hidden }}>${fittingString(cfg.label, 130, 16)}</text>
</rect>
</group>
`;
},
getAnchorPoints() {
return [
[0, 0.5],
[1, 0.5],
];
}
},
'single-node',
)
const graph = new G6.TreeGraph({
container: 'g6-container',
width,
height,
fitView: true,
fitViewPadding: [10, 20],
minZoom: 0.5,
modes: {
default: [
'drag-canvas',
'zoom-canvas',
],
},
plugins: [tooltip],
layout: {
type: 'mindmap',
direction: 'H',
getHeight: () => {
return 16;
},
getWidth: () => {
return 26;
},
getVGap: () => {
return 10;
},
getHGap: () => {
return 80;
}
},
})
let centerX = 0;
graph.node(node => {
if (node.isRoot) {
centerX = node.x;
}
const item = {
label: node.label,
type: 'project',
labelCfg: {
style: {
fontSize: node.children ? 8 : 6,
fill: '#081B26',
},
position: 'center'
offset: !node.children ? -26 : 10
},
}
return item
})
graph.edge((edge) => {
const item = {
id: edge.id,
type: 'polyline',
labelCfg: {
style: {
fontSize: 8,
fill: '#081B26',
lineWidth: 2,
startArrow: {
path: G6.Arrow.triangle(10, 10, 0),
d: 0,
fill: '#0B5FFE',
stroke: '#0B5FFE',
lineWidth: 1,
}
},
},
style: {
lineWidth: 2,
radius: 4,
stroke: 'l(0) 0:#21CADD 0.5:#31CABB 1:#F5CA0E',
},
}
return item
})
graph.data(data)
graph.render()
graph.fitView()
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return
if (!container || !container.scrollWidth || !container.scrollHeight) return
graph.changeSize(container.scrollWidth, container.scrollHeight)
};
},
},
mounted() {
this.initG6(this.list)
}
}
</script>
<style scoped>
.g6-container {
width: 100%;
height: 400px;
}
</style>
