@wayz/chart-graph

npm install @wayz/chart-graph  

graph 链接图

示例

import { Graph, IGraphLink, IGraphNode } from "@wayz/chart-graph"
const GraphShow = () => {
  const data: { nodes: IGraphNode[], links: IGraphLink[] } = useMemo(() => {
    return {
      nodes: [
        {
          id: 1,
          name: "上海",
          fx: 500,
          fy: 250,
          style: {
            radius: 40,
            border: 10,
            borderColor: "rgba(0, 248, 255, 1)",
            backgroundColor: "rgba(10, 23, 72, 1)",
            fontSize: 15,
            fontColor: "rgba(0,255,0,1)",
          },
        },
        {
          id: "北京",
          fx: 200,
          fy: 200,
          style: {
            radius: 50,
          },
        },
        {
          id: "设施",
          style: {
            backgroundColor: ["rgba(218, 33, 247, 1)", "rgba(122, 21, 244, 1)"],
          },
        },
        { id: "设施-1" },
        { id: "设施-12" },
        { id: "设施-123" },
        { id: "设施-科研教育", name: ["设施-科研教育工", "科研教育"] },
        { id: "配套" },
        { id: "配套-1" },
        { id: "配套-2" },
        { id: "配套-3" },
      ],
      links: [
        {
          source: 1,
          target: "设施",
          text: "hah",
          lineStyle: {
            color: "red",
            width: 4,
            dashed: [5, 3],
          },
          labelStyle: {
            color: "green",
            backgroundColor: "#eeeeee",
            rotate: false,
          },
        },
        { source: "上海2", target: "配套", distance: 200 },
        { source: "设施", target: "设施-1" },
        { source: "设施", target: "设施-12" },
        { source: "设施", target: "设施-123" },
        { source: "设施", target: "设施-科研教育" },
        { source: "配套", target: "配套-1" },
        { source: "配套", target: "配套-2" },
        { source: "配套", target: "配套-3" },
        { source: "北京", target: "设施" },
        { source: "北京", target: "配套" },
      ],
    }
  }, [])
  useEffect(() => {
    let graph = new Graph({
      parentId: "parentId",
      autoWrap: true, // 节点文字过长时，是否自动换行
      // zoom: [1,2]
    })
      .nodeStyle((d) => {
        return {
          fontColor: "gray",
        }
      })
      .btnStyle({
        start: 360,
        length: 360,
        width: 30,
        // backgroundColor: ["rgba(134, 36, 255, 1)", "rgba(14, 205, 255, 1)"],
        backgroundColor: "rgba(134, 36, 255, 1)",
        fontSize: 12,
        fontColor: "#ff0000",
      })
      .linkText(4)
      .linkStyle({ dashed: [4, 1] })
      .linkLabelStyle((link) => {
        return {
          color: "#aa0000",
          backgroundColor: "#eeeeee",
          rotate: true,
        }
      })
    graph.nodeBtns((node) => {
      return [
        { label: "隐藏", action: "act1" },
        { label: "对比", action: "act2" },
        { label: "展开", action: "act3" },
        { label: "调整", action: "act4" },
      ]
    })
    // 点击事件监听
    graph.onClickNode((node, btn) => {
      console.log("graph.onClickNode ~ node", node, btn)
    })

    graph.setNodes(data.nodes)
    graph.setLinks(data.links)

    return () => {
      graph.destory()
    }
  }, [data])
  return <div id="parentId" style={{ height: 500 }}></div>
}

定义

TNodeStyle 节点样式

• radius?: number // 半径
• border?: number // 边框
• borderColor?: string
• backgroundColor?: string | string[] // 为数组时会有渐变效果
• fontSize?: number
• fontColor?: string

TBtn 节点按钮

• label: string

TBtnStyle 按钮样式

• width?: number // 宽度
• start?: number // 起始角度 [0-360]
• length?: number // 长度 [0-360]
• backgroundColor?: string | string[]
• fontSize?: number
• fontColor?: string

IGraphNode 节点属性

• id?: string | number
• name?: string | string[] // 为数组时会换行显示
• btns?: any[]
• fx?: number
• fy?: number
• style?: TNodeStyle
• btnStyle?: TBtnStyle
• propName: string: any // 自定义属性

TLineStyle 连线样式

• color?: string
• width?: number
• dashed?: number[] // 虚线 如[4,1]

TLineLabelStyle 连线文字样式

• color?: string
• backgroundColor?: string
• rotate?: boolean // 是否自动旋转角度与连线角度保持一至
• fontSize?: boolean

IGraphLink 链接属性

• id?: string
• text?: string
• distance?: number
• lineStyle?: TLineStyle
• labelStyle?: TLineLabelStyle
• propName: string: any // 自定义属性

IGraphProps 构造参数

• parentId?: string | HTMLDivElement
• autoWrap?: boolean
• zoom?: [number, number]

方法

构造方法

new Graph((props: IGraphProps))

eg.

new Graph({
  parentId: "parentId",
  autoWrap: true, //节点文字是否自动换行
})

自定义节点样式

nodeStyle(value: TNodeStyle | ((node: IGraphNode) => TNodeStyle))

eg.

graph.nodeStyle({
  fontColor: "gray",
})

// or
graph.nodeStyle((node) => {
  // 可根据不同节点返回不同样式
  return {
    fontColor: "gray",
  }
})

自定义节点按钮

1. 按钮列表： nodeBtns(value: TBtn | ((node: IGraphNode) => TBtn))

graph.nodeBtns((node) => {
  return [
    { label: "隐藏", action: "act1" },
    { label: "对比", action: "act2" },
    { label: "展开", action: "act3" },
    { label: "调整", action: "act4" },
  ]
})

2. 按钮样式 btnStyle(value: TBtnStyle | ((node: IGraphNode) => TBtnStyle))

eg.

graph.btnStyle({
  start: 360,
  length: 360,
  width: 30,
  backgroundColor: "rgba(134, 36, 255, 1)",
  fontSize: 12,
  fontColor: "#ff0000",
})
// or
graph.btnStyle((node) => {
  return {
    start: 360,
    length: 360,
    width: 30,
    backgroundColor: ["rgba(134, 36, 255, 1)", "rgba(14, 205, 255, 1)"],
    fontSize: 12,
    fontColor: "#ff0000",
  }
})

自定义链接

1. 链接样式：linkStyle (value: TLineStyle | ((link: IGraphLink) => TLineStyle))
2. 链接文字：linkText (value: string | number | ((link: IGraphLink) => any))
3. 链接文字样式： linkLabelStyle ( value: TLineLabelStyle | ((link: IGraphLink) => TLineLabelStyle))

graph
  .linkText((link) => link.text)
  .linkStyle({ dashed: [4, 1] })
  .linkLabelStyle((link) => {
    return {
      color: "#aa0000",
      backgroundColor: "#eeeeee",
      rotate: true,
    }
  })

点击事件监听

点击回调：onClickNode(fn: (node: IGraphNode, btn?: TBtn) => any)

graph.onClickNode((node, btn) => {
  console.log("graph.onClickNode ~ node", node, btn)
})

5. 动态设置节点、链接

graph.setNodes(data.nodes)
graph.setLinks(data.links)