Graphin

{
  "nodes": [
    {
      "id": "node-0",
      "x": 100,
      "y": 100
    },
    {
      "id": "node-1",
      "x": 200,
      "y": 200
    },
    {
      "id": "node-2",
      "x": 100,
      "y": 300
    }
  ],
  "edges": [
    {
      "source": "node-0",
      "target": "node-1"
    }
  ]
}

{
  nodes: [
    {
      id: 'node-0',
      x: 200,
      y: 240,
      style: {
        // 节点的主要形状，即圆形容器，可以在这里设置节点的大小，border，填充色
        keyshape: {
          /** 容器的宽度 */
          lineWidth: 3,
          /** 节点的大小 */
          size: 80,
          /** 包围边颜色 */
          stroke: parimaryColor,
          /** 填充色 */
          fill: Utils.hexToRgbaToHex(parimaryColor, 0.2),
          /** 透明度 */
          opacity: 1,
          /** 鼠标样式 */
          cursor: 'pointer',
        },
        // 是节点的标签，可以设置标签的值 和样式：放置方位，大小，字体颜色，偏移位置
        label: {
          /** label的名称 */
          value: '节点-0',
          /** 展示位置  'top' | 'bottom' | 'left' | 'right' | 'center'; */
          position: 'top',
          /** 文本填充色 */
          fill: '#000',
          /** 文本大小 */
          fontSize: 16,
          fontFamily: 'normal',
          textAlign: 'center',
          /** 文本在各自方向上的偏移量，主要为了便于调整文本位置 */
          offset: 0,
        },
        // 是节点的中心 ICON 区域，icon 可以是图片，可以是文本，也可以是字体图标。
        icon: {
          /** 类型可以为字体图标，可以为网络图片，可以为纯文本 'font' | 'image' | 'text' */
          type: 'font',
          /** 根据类型，填写对应的值 */
          value: icons.user,
          /** 图标大小 */
          size: 40,
          /** 字体图标的填充色 */
          fill: parimaryColor,
          /** 字体Family */
          fontFamily: 'graphin',
        },
        // 节点的徽标区域，是一个数组，可以分别在不同方位放置，其内容区域可以是文本，数字，也可以是图标。
        badges: [
          {
            /** 放置的位置，ef：LT（left top）左上角 */
            position: 'RT',
            /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
            type: 'text',
            value: '10',
            // type = image 时生效，表示图片的宽度和高度
            size: [25, 25],
            /** 徽标填充色 */
            fill: Utils.hexToRgbaToHex(parimaryColor, 1),
            /** 徽标描边色 */
            stroke: '',
            /** 徽标内文本的颜色 */
            color: '#fff',
            fontSize: 14,
            fontFamily: '',
            // badge 中文本距离四周的偏移量
            padding: 0,
            // badge 在 x 和 y 方向上的偏移量
            offset: [0, 0],
          },
          {
            /** 放置的位置，ef：LT（left top）左上角 */
            position: 'LB',
            /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
            type: 'text',
            value: 'Pin',
            // type = image 时生效，表示图片的宽度和高度
            size: [25, 25],
            /** 徽标填充色 */
            fill: Utils.hexToRgbaToHex(parimaryColor, 1),
            /** 徽标描边色 */
            stroke: '',
            /** 徽标内文本的颜色 */
            color: '#fff',
            fontSize: 12,
            fontFamily: '',
            // badge 中文本距离四周的偏移量
            padding: 0,
            // badge 在 x 和 y 方向上的偏移量
            offset: [0, 0],
          },
        ],
        // 节点的光环，在节点交互过程中（hover，selected，disabled，active）等，可以打开光环，默认是隐藏的，也可以自定义
        halo: {
          /** 光晕 */
          fill: Utils.hexToRgbaToHex(parimaryColor, 0.2),
          /** 透明度 */
          opacity: 1,
          /** 是否展示 */
          visible: false,
          /** 鼠标Hover上去样式 */
          cursor: 'pointer',
        },
        // 节点的交互样式，默认 Graphin 已经内置了交互样式（即将 halo 图形显示出来），也可以自定义
        status: {
          hover: {
            halo: {
              visible: true,
            },
          },
          selected: {
            halo: {
              visible: true,
            },
            keyshape: {
              lineWidth: 10,
            },
          },
        },
      },
    },
  ],
  edges: [],
}
  
  

{
  "nodes": [
    {
      "id": "node-0",
      "x": 100,
      "y": 100,
      "data": {
        "type": "user"
      },
      "style": {
        "label": {
          "value": "node-0"
        },
        "keyshape": {
          "size": 30,
          "stroke": "#FF6A00",
          "fill": "#FF6A00",
          "fillOpacity": 0.2,
          "strokeOpacity": 1
        },
        "icon": {
          "type": "font",
          "value": "",
          "size": 15,
          "fill": "#FF6A00",
          "fontFamily": "graphin"
        }
      }
    },
    {
      "id": "node-1",
      "x": 200,
      "y": 200,
      "data": {
        "type": "company",
        "count": 300
      },
      "style": {
        "label": {
          "value": "node-1"
        },
        "keyshape": {
          "size": 60,
          "stroke": "#46a7a6",
          "fill": "#46a7a6",
          "fillOpacity": 0.2,
          "strokeOpacity": 1
        },
        "icon": {
          "type": "font",
          "value": "",
          "size": 30,
          "fill": "#46a7a6",
          "fontFamily": "graphin"
        }
      }
    },
    {
      "id": "node-2",
      "x": 100,
      "y": 300,
      "data": {
        "type": "company",
        "count": 200
      },
      "style": {
        "label": {
          "value": "node-2"
        },
        "keyshape": {
          "size": 40,
          "stroke": "#46a7a6",
          "fill": "#46a7a6",
          "fillOpacity": 0.2,
          "strokeOpacity": 1
        },
        "icon": {
          "type": "font",
          "value": "",
          "size": 20,
          "fill": "#46a7a6",
          "fontFamily": "graphin"
        }
      }
    }
  ],
  "edges": [
    {
      "source": "node-0",
      "target": "node-1"
    },
    {
      "source": "node-0",
      "target": "node-2",
      "style": {
        "keyshape": {
          "lineDash": [
            2,
            2
          ],
          "stroke": "#FF6A00"
        },
        "label": {
          "value": "实际控制人",
          "fill": "#FF6A00"
        }
      }
    }
  ]
}