echarts3.4.0 關系圖

html部分：

<div  style="width:480px;height:339px;" id="gx"></div>

js部分：(來自qq_29384639的博客：http://blog.csdn.net/qq_29384639/article/details/53322142)

var myChart = echarts.init(document.getElementById('gx')); 
    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  
        }  
    ]  
};  
  
    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);  

js文件引用部分：(來自陳坤 ：https://www.zhihu.com/question/41690502)

<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/dataTool.js"></script>

其中js文件來源:

• echarts官網完整包
• jQuery
• echarts/dataTool.min.js at master · ecomfe/echarts · GitHub