with-flow-components

1.1.2 • Public • Published

HTML代码

<div id="g6-normal"></div>
<div id="g6-er"></div>

JS代码

import { NormalChart, ErChart } from 'with-flow-components';
const data = {
        nodes: [{
            id: '收集日志'
        }, {
            id: '入 es 集群'
        }, {
            id: '入 hdfs'
        }, {
            id: 'hive 计算'
        }, {
            id: 'report'
        }],
        edges: [{
            source: '收集日志',
            target: '入 es 集群'
        }, {
            source: '收集日志',
            target: '入 hdfs'
        }, {
            source: '入 hdfs',
            target: 'hive 计算'
        }, {
            source: '入 es 集群',
            target: 'hive 计算'
        }, {
            source: 'hive 计算',
            target: 'report'
        }]
    };
    const {NormalChart, ErChart} = window.flowComponents;
    new NormalChart({
        el: 'g6-normal',
        data: data,
    });
    const erData = {
        nodes: [{
            id: 'customer',
            label: 'customer',
            x: 200,
            y: 200,
            shape: 'rect',
            size: [60, 40]
        }, {
            id: 'customer_id',
            label: 'customer_id',
            x: 120,
            y: 160,
            shape: 'ellipse',
            size: [80, 40]
        }, {
            id: 'name',
            label: 'name',
            x: 140,
            y: 100,
            shape: 'ellipse',
            size: [80, 40]
        }, {
            id: 'address',
            label: 'address',
            x: 180,
            y: 60,
            shape: 'ellipse',
            size: [80, 40]
        }, {
            id: 'email',
            label: 'email',
            x: 240,
            y: 110,
            shape: 'ellipse',
            size: [80, 40]
        }, {
            id: 'order',
            label: 'order',
            x: 400,
            y: 200,
            shape: 'rect',
            size: [60, 40]
        }, {
            id: 'order_id',
            label: 'order_id',
            x: 320,
            y: 130,
            shape: 'ellipse',
            size: [80, 40]
        }, {
            id: 'order_status',
            label: 'order_status',
            x: 380,
            y: 80,
            shape: 'ellipse',
            size: [80, 40]
        }, {
            id: 'total_price',
            label: 'total_price',
            x: 440,
            y: 150,
            shape: 'ellipse',
            size: [80, 40]
        }, {
            id: 'employee',
            label: 'employee',
            x: 380,
            y: 380,
            shape: 'rect',
            size: [60, 40]
        }, {
            id: 'employee_id',
            label: 'employee_id',
            x: 320,
            y: 440,
            shape: 'ellipse',
            size: [80, 40]
        }, {
            id: 'title',
            label: 'title',
            x: 440,
            y: 440,
            shape: 'ellipse',
            size: [80, 40]
        }],
        edges: [{
            id: 'c_id',
            source: 'customer',
            target: 'customer_id'
        }, {
            id: 'c_name',
            source: 'customer',
            target: 'name'
        }, {
            id: 'c_address',
            source: 'customer',
            target: 'address'
        }, {
            id: 'c_email',
            source: 'customer',
            target: 'email'
        }, {
            id: 'o_id',
            source: 'order',
            target: 'order_id'
        }, {
            id: 'o_price',
            source: 'order',
            target: 'total_price'
        }, {
            id: 'o_status',
            source: 'order',
            target: 'order_status'
        }, {
            id: 'c_o',
            source: 'customer',
            target: 'order',
            relation: 'places',
            sourceEntity: '1',
            targetEntity: 'N',
            shape: 'relation'
        }, {
            id: 'o_e',
            source: 'employee',
            target: 'order',
            relation: 'finalize',
            sourceEntity: '1',
            targetEntity: 'N',
            shape: 'relation'
        }, {
            id: 'e_id',
            source: 'employee',
            target: 'employee_id'
        }, {
            id: 'e_title',
            source: 'employee',
            target: 'title'
        }]
    };
    new ErChart({
        el: 'g6-er',
        data: erData,
    })

Readme

Keywords

Package Sidebar

Install

npm i with-flow-components

Weekly Downloads

0

Version

1.1.2

License

ISC

Unpacked Size

5.37 MB

Total Files

14

Last publish

Collaborators

  • zzzhangpeng