vis network

jdh-vis-component

关系图

API

参数名 说明 必填 类型 默认值 备注
dataSource 数据源（详见demo） 是 Aarray [] test
showIcon 是否显示icon 否 String ‘’
type 图类型，可选：network（网络图）、tower（金字塔） 否 String ‘network’
title 标题 否 String ‘’

DEMO 列表

功能演示

本 Demo 演示关系图的用法。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import VisComponent from 'jdh-vis-component';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showIcon: true,
      height: 700,
      title: "关系图",
      dataSource: {
          "nodes":[
              {
                  "id":1,
                  "image":"http://img3.tbcdn.cn/tfscom/i1/766047394/TB2ND89nFXXXXXKXFXXXXXXXXXX_!!766047394.jpg",
                  "label":"赵大风"
              },
              {
                  "id":6,
                  "image":"http://image.biaobaiju.com/uploads/20181228/16/1545986243-MYAVXUGOTW.jpg",
                  "label":"赵强"
              },
              {
                  "id":7,
                  "image":"http://www.yxzoo.com/uploads/allimg/140123/1-140123104221.png",
                  "label":"李子"
              },
              {
                  "id":8,
                  "image":"http://www.uimaker.com/uploads/allimg/130123/1_130123102431_1.jpg",
                  "label":"李四"
              },
              {
                  "id":9,
                  "image":"http://www.t-chs.com/tuhsJDEwLmFsaWNkbi5jb20vaTEvMzA4Mzg4NTg1NS9PMUNOMDExdDdkUjd2R0VmOW9wSzNfISEzMDgzODg1ODU1JDk.jpg",
                  "label":"李九"
              },
              {
                  "id":10,
                  "image":"http://hbimg.b0.upaiyun.com/b2bec84aa3f4cba021cac9bd6308014e3d92e42a1c646-Ui8l8Y_fw658",
                  "label":"李兰"
              },
              {
                  "id":11,
                  "image":"http://weixin.119.gov.cn/uploads/0/8/8/6/5598e3df211fc.jpg",
                  "label":"李子木"
              }
          ],
          "edges":[
              { "from":1, "to":6, "label":"父子"},
              { "from":1, "to":7, "label":"前妻"},
              { "from":1, "to":8, "label":"朋友" },
              { "from":1, "to":9, "label":"同事" },
              { "from":1, "to":10, "label":"朋友"},
              { "from":1, "to":11, "label":"同事" }
          ]
      },
    };
  }

  render() {
    const { ...props } = this.state
    return (
      <div>
        <VisComponent {...props} />
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);