add 思维导图demo
This commit is contained in:
赵霄
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div :id="domId" class="mind-map"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import G6 from '@antv/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]]
|
||||
}
|
||||
// 节点的颜色
|
||||
const NODE_COLOR = [
|
||||
{
|
||||
bg: '#E9ECF0',
|
||||
stroke: '#3D557B',
|
||||
color: '#2F466B'
|
||||
},
|
||||
{
|
||||
bg: '#EEF4F8',
|
||||
stroke: '#739FC8',
|
||||
color: '#227CCF'
|
||||
},
|
||||
{
|
||||
bg: '#FEF1EA',
|
||||
stroke: '#F9964F',
|
||||
color: '#DF7426'
|
||||
},
|
||||
{
|
||||
bg: '#E5F2F4',
|
||||
stroke: '#2596A1',
|
||||
color: '#2596A1'
|
||||
}
|
||||
]
|
||||
// 节点和收起展开之间的间距
|
||||
const NODE_ICON_MARGIN = 8
|
||||
|
||||
export default {
|
||||
name: 'MindMap',
|
||||
props: {
|
||||
// 页面元素的id
|
||||
domId: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'mountNode'
|
||||
},
|
||||
// 图表的数据
|
||||
mapData: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 图数据的key字段
|
||||
mapDataKeyField: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'id'
|
||||
},
|
||||
// 回显文本取的字段
|
||||
labelField: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'name'
|
||||
},
|
||||
// 节点的宽度
|
||||
nodeWidth: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 300
|
||||
},
|
||||
// 节点高度
|
||||
nodeHeight: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 46
|
||||
},
|
||||
// 收起展开节点图标的半径
|
||||
expendCollapseIconR: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 8
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mapData: {
|
||||
handler () {
|
||||
this.data = JSON.parse(JSON.stringify(this.mapData))
|
||||
this.$nextTick(() => {
|
||||
this.initMindMap()
|
||||
})
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initMindMap () {
|
||||
G6.registerNode('tree-node', {
|
||||
drawShape: (cfg, group) => {
|
||||
const nodeColorIndex = cfg.depth % NODE_COLOR.length
|
||||
const nodeStyle = NODE_COLOR[nodeColorIndex]
|
||||
// 节点整体的内容
|
||||
const nodeContainer = group.addShape('rect', {})
|
||||
// 实际显示的边框，由三部分组成，左右两侧是两个圆，中间用两个矩形覆盖，一个有边框，另一个没有边框，没有边框这个高小一点，宽大一点
|
||||
group.addShape('circle', {
|
||||
attrs: {
|
||||
x: this.nodeHeight / 2,
|
||||
y: this.nodeHeight / 2,
|
||||
r: this.nodeHeight / 2,
|
||||
stroke: nodeStyle.stroke,
|
||||
fill: nodeStyle.bg
|
||||
}
|
||||
})
|
||||
group.addShape('circle', {
|
||||
attrs: {
|
||||
x: this.nodeWidth - this.nodeHeight / 2,
|
||||
y: this.nodeHeight / 2,
|
||||
r: this.nodeHeight / 2,
|
||||
stroke: nodeStyle.stroke,
|
||||
fill: nodeStyle.bg
|
||||
}
|
||||
})
|
||||
group.addShape('rect', {
|
||||
attrs: {
|
||||
x: this.nodeHeight / 2,
|
||||
y: 0,
|
||||
width: this.nodeWidth - this.nodeHeight,
|
||||
height: this.nodeHeight,
|
||||
stroke: nodeStyle.stroke,
|
||||
fill: nodeStyle.bg
|
||||
}
|
||||
})
|
||||
group.addShape('rect', {
|
||||
attrs: {
|
||||
x: this.nodeHeight / 2 - 3,
|
||||
y: 0.5,
|
||||
width: this.nodeWidth - this.nodeHeight + 6,
|
||||
height: this.nodeHeight - 1,
|
||||
fill: nodeStyle.bg
|
||||
}
|
||||
})
|
||||
// 文本的部分
|
||||
let textContent = cfg.name || ''
|
||||
if (textContent.length > 40) {
|
||||
textContent = textContent.slice(0, 20) + '\n' + textContent.slice(20, 40) + '\n' + textContent.slice(40)
|
||||
} else if (textContent.length > 20) {
|
||||
textContent = textContent.slice(0, 20) + '\n' + textContent.slice(20)
|
||||
}
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
text: textContent,
|
||||
x: this.nodeWidth / 2,
|
||||
y: this.nodeHeight / 2,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
fill: nodeStyle.color
|
||||
}
|
||||
})
|
||||
const hasChildren = cfg.children && cfg.children.length > 0
|
||||
if (hasChildren) {
|
||||
// 展开收起
|
||||
group.addShape('marker', {
|
||||
attrs: {
|
||||
x: this.nodeWidth + NODE_ICON_MARGIN,
|
||||
y: this.nodeHeight / 2,
|
||||
r: this.expendCollapseIconR,
|
||||
symbol: COLLAPSE_ICON,
|
||||
stroke: '#666',
|
||||
lineWidth: 2
|
||||
},
|
||||
className: 'collapse-icon'
|
||||
})
|
||||
}
|
||||
nodeContainer.attr({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: this.nodeWidth + this.expendCollapseIconR + NODE_ICON_MARGIN,
|
||||
height: this.nodeHeight,
|
||||
})
|
||||
return nodeContainer
|
||||
}
|
||||
}, 'single-shape')
|
||||
const graph = new G6.TreeGraph({
|
||||
container: this.domId,
|
||||
modes: {
|
||||
default: [{
|
||||
type: 'collapse-expand',
|
||||
onChange: function onChange (item, collapsed) {
|
||||
const data = item.get('model')
|
||||
const 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: {
|
||||
type: 'tree-node',
|
||||
anchorPoints: [[0, 0.5], [1, 0.5]]
|
||||
},
|
||||
defaultEdge: {
|
||||
type: 'cubic-horizontal',
|
||||
style: {
|
||||
stroke: '#A3B1BF'
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
type: 'compactBox',
|
||||
direction: 'LR',
|
||||
getId: (d) => {
|
||||
return d.id
|
||||
},
|
||||
getVGap: () => {
|
||||
return 20
|
||||
},
|
||||
getHGap: () => {
|
||||
return 300
|
||||
}
|
||||
}
|
||||
})
|
||||
G6.Util.traverseTree(this.data, (item) => {
|
||||
item.id = item[this.mapDataKeyField]
|
||||
})
|
||||
graph.data(this.data)
|
||||
graph.render()
|
||||
graph.fitView()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.mind-map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user