link-chart-vue3
v0.0.1
Published
支持Vue3的 关联关系图谱组件,可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱,可提供多种图谱布局,包括树状布局、中心布局、力学布局自动布局等。
Downloads
101
Readme
支持Vue3的 关联关系图谱组件,可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱,可提供多种图谱布局,包括树状布局、中心布局、力学布局自动布局等。
Getting Started 快速使用:
npm install --save link-chart-vue3
import LinkChart from 'link-chart-vue3'<LinkChart
ref="linkChartRef"
:options="options"
:on-node-click="onNodeClick"
:on-line-click="onLineClick"
/>const jsonData = {
rootId: 'a',
nodes: [
{ id: 'a', text: 'A', borderColor: 'yellow' },
{ id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },
{ id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },
{ id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }
],
lines: [
{ from: 'a', to: 'b', text: 'line1', color: '#43a2f1' },
{ from: 'a', to: 'c', text: 'line2' },
{ from: 'a', to: 'e', text: 'line3' },
{ from: 'b', to: 'e', color: '#67C23A' }
]
}
this.$refs.linkChartRef.setJsonData(jsonData, (instance) => {
});