直线关系图

描述:当前是关于Echarts图表中的 关系图 示例。
 
            var res = {
    "data": [{
        "draggable": "true",
        "symbolSize": 90,
        "name": "真武汤",
        "id": "n19433",
        "text": "真武汤:方剂",
        "category": 0,
        "class": 0
    }, {
        "draggable": "true",
        "symbolSize": 20,
        "name": "中医理论",
        "text": "中医理论",
        "id": "1",
        "category": 1,
        "class": 1
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "阴阳水火气血论",
        "id": "n103631",
        "text": "阴阳水火气血论:中医理论",
        "category": 1,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 20,
        "name": "病证",
        "text": "病证",
        "id": "2",
        "category": 2,
        "class": 1
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "咳血",
        "id": "n6212",
        "text": "咳血:病证",
        "category": 2,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "伤寒汗多亡阳",
        "id": "n42310",
        "text": "伤寒汗多亡阳:病证",
        "category": 2,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "眩晕",
        "id": "n6326",
        "text": "眩晕:病证",
        "category": 2,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "腹痛",
        "id": "n7158",
        "text": "腹痛:病证",
        "category": 2,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 20,
        "name": "方名",
        "text": "方名",
        "id": "3",
        "category": 3,
        "class": 1
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "真武汤",
        "id": "n42315",
        "text": "真武汤:方名",
        "category": 3,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 20,
        "name": "功用主治",
        "text": "功用主治",
        "id": "4",
        "category": 4,
        "class": 1
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "肾经...能镇水",
        "id": "n104593",
        "text": "肾经阳虚不能镇水:功用主治",
        "category": 4,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "伤寒...方主之",
        "id": "n42317",
        "text": "伤寒发汗过多,其人心下悸,头眩身瞤,振振欲擗地者,此方主之:功用主治",
        "category": 4,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 20,
        "name": "组成",
        "text": "组成",
        "id": "5",
        "category": 5,
        "class": 1
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "附子",
        "id": "n128",
        "text": "附子:药物",
        "category": 5,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "生姜",
        "id": "n4998",
        "text": "生姜:药物",
        "category": 5,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "白芍",
        "id": "n3773",
        "text": "白芍:药物",
        "category": 5,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "茯苓",
        "id": "n8268",
        "text": "茯苓:药物",
        "category": 5,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "白术",
        "id": "n3777",
        "text": "白术:药物",
        "category": 5,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "茯苓、甘草",
        "id": "n41392",
        "text": "茯苓、甘草:药物",
        "category": 5,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "熟附...、生姜",
        "id": "n41320",
        "text": "熟附子、白茯苓、白芍、甘草、生姜:药物",
        "category": 5,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "茯苓...枚,制",
        "id": "n42316",
        "text": "茯苓去皮 芍药炒 生姜各三两 白术二两,炒 附子一枚,制:药物",
        "category": 5,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 20,
        "name": "方解",
        "text": "方解",
        "id": "6",
        "category": 6,
        "class": 1
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "茯苓...生津液",
        "id": "n42318",
        "text": "茯苓、白术,补土利水之物也,可以伐肾而疗心悸;生姜、附子,益卫回阳之物也,可以壮火而祛虚邪;芍药之酸,收阴气也,可以和荣而生津液:方解",
        "category": 6,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "五味",
        "id": "n6079",
        "text": "五味:药物",
        "category": 5,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "干姜",
        "id": "n15459",
        "text": "干姜:药物",
        "category": 5,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "细辛",
        "id": "n6967",
        "text": "细辛:药物",
        "category": 5,
        "class": 2
    }, {
        "draggable": "true",
        "symbolSize": 20,
        "name": "释名",
        "text": "释名",
        "id": "7",
        "category": 7,
        "class": 1
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "真武...以主之",
        "id": "n42319",
        "text": "真武,北方之神,司水火者也。今肾气凌心,虚邪内动,有水火奔腾之象,故名此汤以主之:释名",
        "category": 7,
        "class": 2
    }],
    "links": [{
        "source": "n19433",
        "value": "",
        "target": "1"
    }, {
        "source": "1",
        "value": "",
        "target": "n103631"
    }, {
        "source": "n19433",
        "value": "",
        "target": "2"
    }, {
        "source": "2",
        "value": "",
        "target": "n6212"
    }, {
        "source": "n19433",
        "value": "",
        "target": "2"
    }, {
        "source": "2",
        "value": "",
        "target": "n42310"
    }, {
        "source": "n19433",
        "value": "",
        "target": "2"
    }, {
        "source": "2",
        "value": "",
        "target": "n6326"
    }, {
        "source": "n19433",
        "value": "",
        "target": "2"
    }, {
        "source": "2",
        "value": "",
        "target": "n7158"
    }, {
        "source": "n19433",
        "value": "",
        "target": "3"
    }, {
        "source": "3",
        "value": "",
        "target": "n42315"
    }, {
        "source": "n19433",
        "value": "",
        "target": "4"
    }, {
        "source": "4",
        "value": "",
        "target": "n104593"
    }, {
        "source": "n19433",
        "value": "",
        "target": "4"
    }, {
        "source": "4",
        "value": "",
        "target": "n42317"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n128"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n4998"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n3773"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n8268"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n3777"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n3773"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n3777"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n128"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n41392"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n41320"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n3777"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n42316"
    }, {
        "source": "n19433",
        "value": "",
        "target": "6"
    }, {
        "source": "6",
        "value": "",
        "target": "n42318"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n6079"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n15459"
    }, {
        "source": "n19433",
        "value": "",
        "target": "5"
    }, {
        "source": "5",
        "value": "",
        "target": "n6967"
    }, {
        "source": "n19433",
        "value": "",
        "target": "7"
    }, {
        "source": "7",
        "value": "",
        "target": "n42319"
    }],
    "categories": [{
        "name": "方剂"
    }, {
        "name": "中医理论"
    }, {
        "name": "病证"
    }, {
        "name": "方名"
    }, {
        "name": "功用主治"
    }, {
        "name": "药物"
    }, {
        "name": "方解"
    }, {
        "name": "释名"
    }],
    "message": "success",
    "status": 200
}

let data = res.data;
let links = res.links;
let categories = res.categories;



option = {

    color: [
        '#ff7f50',
        '#87cefa',
        '#da70d6',
        '#cd7033',
        '#6495ed',
        '#ff69b4',
        '#ba55d3',
        '#cd5c5c',
        '#ff0d32',
        '#40e0d0',
        '#1e90ff',
        '#ff6347',
        '#7b68ee',
        '#d0648a',
        '#09b0ff',
        '#6b8e23',
        '#4ea397',
        '#3cb371',
        '#b8860b',
        '#7bd9a5'
    ],
    tooltip: {},
    legend: [{
        x: 'center',
        y: 'top',
        orient: 'horizontal',
        data: categories.map(function(a) {
            return a.name;
        }),
    }],
    zoom: 2.0,
    animation: true,

    series: [{
        data: data,
        links: links,
        categories: categories,
        type: 'graph',
        layout: 'force',
        symbolSize: function(size) {
            return size;
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
            color: '#000',
            normal: {
                show: true,
                textStyle: {
                    fontSize: 15
                },
                formatter: "{c}"

            }
        },
        force: {
            repulsion: 2500,
            edgeLength: [10, 30]
        },
        focusNodeAdjacency: true,
        roam: true,

        label: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 15,
                    fontWeight: 'bolder',
                    color: '#000',
                },
            }
        },
        force: {
            repulsion: 1000,
            edgeLength: 300
        },
        tooltip: {

            formatter: function(node) { // 区分连线和节点,节点上额外显示其他数字
                return node.data.text;
            },


        },
        lineStyle: {
            normal: {
                opacity: 0.9,
                width: 1,
                color: '#000',
            }
        },
    }]
};