fz-graph 树形企业图谱

安装

yarn add fz-graph

使用

import { FzGraph } from 'fz-graph'

const graph = new FzGraph({
  target: document.getElementById('app'),
  props: {
    // 字体大小
    fontSize: 14,
    // 动画过渡时长
    duration: 450,
    // 缩放范围
    scaleRange: [0.5, 3],
    ...
  }
})

API

参数	类型	默认值	介绍
`target`	Element	-	目标元素节点
`treeData`	Object	-	树形结构数据
`fontSize`	Number	14	字体大小
`duration`	Number	450	动画过渡时长
`nodeSize`	Number[]	[35, 56]	树形大小
`scaleRange`	Number[]	[0.5, 3]	缩放范围
`defaultScale`	Number	1	默认缩放值
`nodeHeight`	Number	28	节点高度
`watermark`	String	fz-graph	水印内容
`themeColor`	String	#214CFA	主题颜色
`otherNodeColor`	String	#FF810A	其他节点颜色
`backgroundColor`	String	#F3F4F6	背景色
`defaultExpandLevel`	Number	1	默认展开层级
`onNodeClick`	Function	-	节点点击事件
`onLineLabelClick`	Function	-	线节点 Label 点击事件

treeData 数据结构

{
  "label": "根节点企业名称",
  "id": 1,
  "role": "agent",
  "children": [
    "label": "子节点企业",
    "id": 2,
    "role": "agent",
    // xxx...
  ]
}

Events

方法	介绍
`onMagnifyGraph`	放大
`onShrinkGraph`	缩小
`onResetGraph`	重置
`initGraphData`	图谱数据初始化

fz-graph 树形企业图谱 #

安装 #

使用 #

API #

treeData 数据结构 #

Events #

fz-graph 树形企业图谱

安装

使用

API

treeData 数据结构

Events