@ant-design/graphs NPM

@ant-design/graphs

A React relation graphs component library, based on G6.

npm npm

Case

✨ Features

Easy to use
TypeScript

📦 Installation

$ npm install @ant-design/graphs

🔨 Usage

import React from 'react';
import { DecompositionTreeGraph } from '@ant-design/graphs';

const DemoDecompositionTreeGraph = () => {
  const data = {
    id: 'A0',
    value: {
      title: '订单金额',
      items: [
        {
          text: '3031万',
        },
      ],
    },
    children: [
      {
        id: 'A1',
        value: {
          title: '华南',
          items: [
            {
              text: '1152万',
            },
            {
              text: '占比',
              value: '30%',
            },
          ],
        },
        children: [
          {
            id: 'A11',
            value: {
              title: '广东',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
          },
          {
            id: 'A12',
            value: {
              title: '广西',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
          },
          {
            id: 'A13',
            value: {
              title: '海南',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
          },
        ],
      },
      {
        id: 'A2',
        value: {
          title: '华北',
          items: [
            {
              text: '595万',
            },
            {
              text: '占比',
              value: '30%',
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
            },
          ],
        },
      },
    ],
  };

  const config = {
    data,
    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
    nodeCfg: {
      title: {
        style: (cfg) => {
          return {
            fill: cfg?.value?.title === '青年' ? 'yellow' : '#fff',
          };
        },
      },
      items: {
        containerStyle: {
          fill: '#fff',
        },
        style: (cfg, group, type) => {
          const styles = {
            value: {
              fill: '#52c41a',
            },
            text: {
              fill: '#aaa',
            },
            icon: {
              width: 10,
              height: 10,
            },
          };
          return styles[type];
        },
      },
      nodeStateStyles: {
        hover: {
          stroke: '#1890ff',
          lineWidth: 2,
        },
      },
      style: {
        radius: [2, 2, 2, 2],
      },
    },
    markerCfg: (cfg) => {
      const { children } = cfg;
      return {
        show: children?.length,
      };
    },
  };

  return <DecompositionTreeGraph {...config} />;
};

export default DemoDecompositionTreeGraph;

📜 Document & API

See chart API for details. Common props:

// Graph 通用配置
export interface CommonConfig extends GraphContainerConfig {
  data: Datum;
  /** 是否缩放节点大小自适应容器 */
  autoFit?: boolean;

  /** 是否将图平移到中心位置 */
  fitCenter?: boolean;

  width?: number;
  height?: number;
  pixelRatio?: number;

  /** 不同组件 layout 有差别，参考对应组件文档 */
  layout?: any;

  /** 边配置 */
  edgeCfg?: EdgeCfg;

  /** 节点配置 */
  nodeCfg?: NodeCfg;

  /** marker 配置 */
  markerCfg?: IMarkerCfg;

  /** 迷你地 */
  minimapCfg?: MiniMapConfig;

  /** 交互组件 */
  toolbarCfg?: ToolbarCfg;

  /** 提示 */
  tooltipCfg?: TooltipCfg;

  /** 交互行为 */
  behaviors?: string[];

  /** 是否开启动画 */
  animate?: boolean;

  /**
   * @title 是否自定义布局
   * @description 开启后，layout 失效，使用 data 里面的 x/y 进行数据布局
   * @example
   * ```ts
   *  {
   *   id: '-3',
   *   x: 100,
   *   y: 100,
   *   value: {
   *     title: '来源页面A',
   *     items: [
   *       {
   *         text: '曝光PV',
   *         value: '10.30万',
   *         icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
   *       },
   *     ],
   *   },
   *  },
   * ```
   * @default false
   */
  customLayout?: boolean;

  /** 图表渲染完成回调 */
  onReady?: (graph: IGraph) => void;
}