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 点击事件 |

Events

| 方法 | 介绍 | 参数 | | ----------------- | -------------- | ------------------------------ | | onMagnifyGraph | 放大 | - | | onShrinkGraph | 缩小 | - | | onResetGraph | 重置 | - | | initGraphData | 图谱数据初始化 | - | | onPartialUpdate | 局部更新节点 | target-目标节点节点, data-数据 |