图谱可视化

描述:当前是关于Echarts图表中的 关系图 示例。
 
            let res_json = {
    "data": [{
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"茯苓\"",
        "id": "\"n562\"",
        "text": "\"茯苓\":\"药物\"",
        "category": 2,
        "value": "\"茯苓\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"生姜\"",
        "id": "\"n456\"",
        "text": "\"生姜\":\"药物\"",
        "category": 2,
        "value": "\"生姜\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"或小便利\"",
        "id": "\"n1945\"",
        "text": "\"或小便利\":\"证候表现\"",
        "category": 4,
        "value": "\"或小便利\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"或呕\"",
        "id": "\"n1947\"",
        "text": "\"或呕\":\"证候表现\"",
        "category": 4,
        "value": "\"或呕\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"太阳病发...解\"",
        "id": "\"n842\"",
        "text": "\"太阳病发汗,汗出不解\":\"病因病机\"",
        "category": 3,
        "value": "\"太阳病发...解\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"振振欲擗地\"",
        "id": "\"n841\"",
        "text": "\"振振欲擗地\":\"证候表现\"",
        "category": 4,
        "value": "\"振振欲擗地\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"少阴病\"",
        "id": "\"n1839\"",
        "text": "\"少阴病\":\"病证\"",
        "category": 5,
        "value": "\"少阴病\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"头眩\"",
        "id": "\"n839\"",
        "text": "\"头眩\":\"证候表现\"",
        "category": 4,
        "value": "\"头眩\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"或下利\"",
        "id": "\"n1946\"",
        "text": "\"或下利\":\"证候表现\"",
        "category": 4,
        "value": "\"或下利\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"自下利\"",
        "id": "\"n1943\"",
        "text": "\"自下利\":\"证候表现\"",
        "category": 4,
        "value": "\"自下利\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"小便不利\"",
        "id": "\"n349\"",
        "text": "\"小便不利\":\"证候表现\"",
        "category": 4,
        "value": "\"小便不利\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"芍药\"",
        "id": "\"n452\"",
        "text": "\"芍药\":\"药物\"",
        "category": 2,
        "value": "\"芍药\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"细辛\"",
        "id": "\"n655\"",
        "text": "\"细辛\":\"药物\"",
        "category": 2,
        "value": "\"细辛\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"加减\"",
        "id": "\"m1616\"",
        "text": "\"加减\":\"虚拟节点\"",
        "category": 1,
        "value": "\"加减\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"腹痛\"",
        "id": "\"n1908\"",
        "text": "\"腹痛\":\"证候表现\"",
        "category": 4,
        "value": "\"腹痛\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"干姜\"",
        "id": "\"n568\"",
        "text": "\"干姜\":\"药物\"",
        "category": 2,
        "value": "\"干姜\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"有水气\"",
        "id": "\"n1948\"",
        "text": "\"有水气\":\"病因病机\"",
        "category": 3,
        "value": "\"有水气\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"加减\"",
        "id": "\"m1618\"",
        "text": "\"加减\":\"虚拟节点\"",
        "category": 1,
        "value": "\"加减\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"组成\"",
        "id": "\"m1622\"",
        "text": "\"组成\":\"虚拟节点\"",
        "category": 1,
        "value": "\"组成\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"身瞤动\"",
        "id": "\"n840\"",
        "text": "\"身瞤动\":\"证候表现\"",
        "category": 4,
        "value": "\"身瞤动\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"四肢沉重疼痛\"",
        "id": "\"n1942\"",
        "text": "\"四肢沉重疼痛\":\"证候表现\"",
        "category": 4,
        "value": "\"四肢沉重疼痛\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"白术\"",
        "id": "\"n561\"",
        "text": "\"白术\":\"药物\"",
        "category": 2,
        "value": "\"白术\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"辨治\"",
        "id": "\"m1621\"",
        "text": "\"辨治\":\"虚拟节点\"",
        "category": 1,
        "value": "\"辨治\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"组成\"",
        "id": "\"m515\"",
        "text": "\"组成\":\"虚拟节点\"",
        "category": 1,
        "value": "\"组成\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"辨治\"",
        "id": "\"m514\"",
        "text": "\"辨治\":\"虚拟节点\"",
        "category": 1,
        "value": "\"辨治\""
    }, {
        "draggable": "true",
        "symbolSize": 60,
        "name": "\"真武汤\"",
        "id": "\"n843\"",
        "text": "\"真武汤\":\"方剂\"",
        "category": 0,
        "value": "\"真武汤\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"附子\"",
        "id": "\"n492\"",
        "text": "\"附子\":\"药物\"",
        "category": 2,
        "value": "\"附子\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"心下悸\"",
        "id": "\"n838\"",
        "text": "\"心下悸\":\"证候表现\"",
        "category": 4,
        "value": "\"心下悸\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"加减\"",
        "id": "\"m1617\"",
        "text": "\"加减\":\"虚拟节点\"",
        "category": 1,
        "value": "\"加减\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"五味子\"",
        "id": "\"n656\"",
        "text": "\"五味子\":\"药物\"",
        "category": 2,
        "value": "\"五味子\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"发热\"",
        "id": "\"n31\"",
        "text": "\"发热\":\"证候表现\"",
        "category": 4,
        "value": "\"发热\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"或咳\"",
        "id": "\"n1944\"",
        "text": "\"或咳\":\"证候表现\"",
        "category": 4,
        "value": "\"或咳\""
    }, {
        "draggable": "true",
        "symbolSize": 40,
        "name": "\"加减\"",
        "id": "\"m1615\"",
        "text": "\"加减\":\"虚拟节点\"",
        "category": 1,
        "value": "\"加减\""
    }],
    "links": [{
        "source": "\"n843\"",
        "value": "\"加减\"",
        "target": "\"m1618\""
    }, {
        "source": "\"m514\"",
        "value": "\"辨治\"",
        "target": "\"n561\""
    }, {
        "source": "\"m514\"",
        "value": "\"辨治\"",
        "target": "\"n452\""
    }, {
        "source": "\"m514\"",
        "value": "\"辨治\"",
        "target": "\"n840\""
    }, {
        "source": "\"n843\"",
        "value": "\"组成\"",
        "target": "\"m515\""
    }, {
        "source": "\"m514\"",
        "value": "\"辨治\"",
        "target": "\"n456\""
    }, {
        "source": "\"n843\"",
        "value": "\"组成\"",
        "target": "\"m1622\""
    }, {
        "source": "\"m1621\"",
        "value": "\"辨治\"",
        "target": "\"n1944\""
    }, {
        "source": "\"m515\"",
        "value": "\"组成\"",
        "target": "\"n561\""
    }, {
        "source": "\"m1618\"",
        "value": "\"药物\"",
        "target": "\"n492\""
    }, {
        "source": "\"m515\"",
        "value": "\"组成\"",
        "target": "\"n452\""
    }, {
        "source": "\"m515\"",
        "value": "\"组成\"",
        "target": "\"n456\""
    }, {
        "source": "\"n843\"",
        "value": "\"加减\"",
        "target": "\"m1615\""
    }, {
        "source": "\"m1615\"",
        "value": "\"药物\"",
        "target": "\"n655\""
    }, {
        "source": "\"m1621\"",
        "value": "\"辨治\"",
        "target": "\"n1945\""
    }, {
        "source": "\"m1621\"",
        "value": "\"辨治\"",
        "target": "\"n1942\""
    }, {
        "source": "\"m514\"",
        "value": "\"辨治\"",
        "target": "\"n839\""
    }, {
        "source": "\"m1617\"",
        "value": "\"药物\"",
        "target": "\"n568\""
    }, {
        "source": "\"n843\"",
        "value": "\"加减\"",
        "target": "\"m1616\""
    }, {
        "source": "\"m1621\"",
        "value": "\"辨治\"",
        "target": "\"n1947\""
    }, {
        "source": "\"m514\"",
        "value": "\"辨治\"",
        "target": "\"n842\""
    }, {
        "source": "\"m1617\"",
        "value": "\"药物\"",
        "target": "\"n452\""
    }, {
        "source": "\"m1621\"",
        "value": "\"辨治\"",
        "target": "\"n1946\""
    }, {
        "source": "\"m1616\"",
        "value": "\"药物\"",
        "target": "\"n562\""
    }, {
        "source": "\"m1621\"",
        "value": "\"辨治\"",
        "target": "\"n349\""
    }, {
        "source": "\"m1615\"",
        "value": "\"药物\"",
        "target": "\"n656\""
    }, {
        "source": "\"m1622\"",
        "value": "\"组成\"",
        "target": "\"n456\""
    }, {
        "source": "\"m514\"",
        "value": "\"辨治\"",
        "target": "\"n838\""
    }, {
        "source": "\"m1622\"",
        "value": "\"组成\"",
        "target": "\"n452\""
    }, {
        "source": "\"m1622\"",
        "value": "\"组成\"",
        "target": "\"n561\""
    }, {
        "source": "\"m514\"",
        "value": "\"辨治\"",
        "target": "\"n492\""
    }, {
        "source": "\"m1618\"",
        "value": "\"药物\"",
        "target": "\"n456\""
    }, {
        "source": "\"m1621\"",
        "value": "\"辨治\"",
        "target": "\"n1908\""
    }, {
        "source": "\"m514\"",
        "value": "\"辨治\"",
        "target": "\"n562\""
    }, {
        "source": "\"m1621\"",
        "value": "\"辨治\"",
        "target": "\"n1839\""
    }, {
        "source": "\"n843\"",
        "value": "\"加减\"",
        "target": "\"m1617\""
    }, {
        "source": "\"m514\"",
        "value": "\"辨治\"",
        "target": "\"n31\""
    }, {
        "source": "\"m1621\"",
        "value": "\"辨治\"",
        "target": "\"n1948\""
    }, {
        "source": "\"m514\"",
        "value": "\"辨治\"",
        "target": "\"n841\""
    }, {
        "source": "\"n843\"",
        "value": "\"辨治\"",
        "target": "\"m1621\""
    }, {
        "source": "\"n843\"",
        "value": "\"辨治\"",
        "target": "\"m514\""
    }, {
        "source": "\"m1621\"",
        "value": "\"辨治\"",
        "target": "\"n1943\""
    }, {
        "source": "\"m1615\"",
        "value": "\"药物\"",
        "target": "\"n568\""
    }, {
        "source": "\"m1622\"",
        "value": "\"组成\"",
        "target": "\"n562\""
    }, {
        "source": "\"m515\"",
        "value": "\"组成\"",
        "target": "\"n492\""
    }, {
        "source": "\"m1622\"",
        "value": "\"组成\"",
        "target": "\"n492\""
    }, {
        "source": "\"m515\"",
        "value": "\"组成\"",
        "target": "\"n562\""
    }],
    "categories": [{
        "name": "\"方剂\""
    }, {
        "name": "\"虚拟节点\""
    }, {
        "name": "\"药物\""
    }, {
        "name": "\"病因病机\""
    }, {
        "name": "\"证候表现\""
    }, {
        "name": "\"病证\""
    }],
    "message": "success",
    "status": 200
}

let data = res_json.data;
let links = res_json.links;
let categories = res_json.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: [{
        type: 'graph',
        layout: 'force',
        symbolSize: function(size) {
            return size;
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 10
                },
                formatter: "{c}"
            }
        },
        force: {
            repulsion: 2500,
            edgeLength: [10, 50]
        },
        focusNodeAdjacency: true,
        roam: true,
        data: data,
        links: links,
        categories: categories,
        label: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 12
                },
            }
        },
        force: {
            repulsion: 1000
        },
        tooltip: {

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


        },
        lineStyle: {
            normal: {
                opacity: 0.9,
                width: 1,
                curveness: 0.3
            }
        },
    }]
};
myChart.setOption(option);