echarts3.0之關系圖詳解

近期需要使用echarts關系圖，當我打開echarts3.0官方demo后發現，對於新手而言，直接看懂有點兒難度，固寫這樣一篇文章讓自己加深記憶，也便新手迅速上手。話不多說，開整生氣！

echarts3.0官網提供的demo是json文件或者xml文件，我這里以json格式為例說明。echarts3.0關系圖由三部分組成，關系類別、關系節點、節點之間連線。下面是代碼，代碼可以直接粘貼到echarts官網中執行。

myChart.showLoading();
    var webkitDep = {
    "type": "force",
    "categories": [//關系網類別，可以寫多組
        {
            "name": "人物關系",//關系網名稱
            "keyword": {},
            "base": "人物關系"
        }
    ],
    "nodes": [//展示的節點
        {
            "name": "劉燁",//節點名稱
            "value": 3,
            "category": 0//與關系網類別索引對應，此處只有一個關系網所以這里寫0
        },
        {
            "name": "霓娜",
            "value": 1,
            "category": 0
        },
        {
            "name": "諾一",
            "value": 1,
            "category": 0
        }
    ],
    "links": [//節點之間連接
        {
            "source": 0,//起始節點，0表示第一個節點
            "target": 1 //目標節點，1表示與索引為1的節點進行連接
        },
        {
            "source": 0,
            "target": 2
        }
    ]
};
    myChart.hideLoading();
 
    option = {
        legend: {
            data: ['人物關系']//此處的數據必須和關系網類別中name相對應
        },
        series: [{
            type: 'graph',
            layout: 'force',
            animation: false,
            label: {
                normal: {
                    show:true,
                    position: 'right'
                }
            },
            draggable: true,
            data: webkitDep.nodes.map(function (node, idx) {
                node.id = idx;
                return node;
            }),
            categories: webkitDep.categories,
            force: {
                edgeLength: 105,//連線的長度
                repulsion: 100  //子節點之間的間距
            },
            edges: webkitDep.links
        }]
    };
    myChart.setOption(option);

最終效果圖：