<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="main" style="width: 100%;height: 600px"></div> </body> <script src="dist/jquery-3.4.1.min.js"></script> <script src="dist/echarts.js"></script> <script> let heigth = $(window).height(); $("#main").height(heigth); var option; // 所有節點合集 let nodes = [{ name: "徐雲", id: "1", category: 0, draggable: true, //可拖拽 proportion: "40%", //比例 itemStyle: { color: 'red' //單獨設置這個節點的顏色 } }, { name: "王福", id: "2", category: 0, proportion: "10%", draggable: true }, { name: "馮梁", id: "3", category: 0, proportion: "40%", draggable: true }, { name: "鄧榮", id: "4", category: 0, proportion: "40%", draggable: true }, { name: "周松", id: "5", category: 0, proportion: "40%", draggable: true }, { name: "陶勇", id: "6", category: 0, proportion: "40%", draggable: true }, { name: "王軍", id: "7", category: 0, proportion: "40%", draggable: true }, { name: "李慶", id: "8", category: 0, proportion: "20%", draggable: true }, { name: "陳獻", id: "9", category: 0, proportion: "10%", draggable: true }, { name: "趙成", id: "10", category: 0, proportion: "2%", draggable: true }, { name: "鄭勇", id: "11", category: 0, proportion: "20%", draggable: true }, { name: "趙傑", id: "12", category: 0, proportion: "60%", draggable: true }, { name: "陳東", id: "13", category: 0, proportion: "8%", draggable: true } ]; // 每個節點的關系， let links = [{ source: "1", //節點的id target: "2", //節點的id，這兩個就是誰和誰之間建立關系 relation: { name: "朋友", //關系名稱 id: "1", }, }, { source: "1", target: "3", relation: { name: "朋友", id: "1", }, }, { source: "3", target: "4", relation: { name: "表親", id: "1", }, }, { source: "4", target: "5", relation: { name: "叔叔", id: "1", }, }, { source: "6", target: "7", relation: { name: "愛人", id: "1", }, }, { source: "7", target: "8", relation: { name: "同學", id: "1", }, }, { source: "1", target: "8", relation: { name: "房東", id: "1", }, }, { source: "8", target: "9", relation: { name: "朋友", id: "1", }, }, { source: "9", target: "10", relation: { name: "朋友", id: "1", }, }, { source: "1", target: "11", relation: { name: "朋友", id: "1", }, }, { source: "12", target: "13", relation: { name: "朋友", id: "1", }, }, { source: "1", target: "12", relation: { name: "朋友", id: "1", }, }, ]; // 這個是設置每個節點的線的長度 nodes = nodes.map((item) => { item.x = Math.random() * 700 item.y = Math.random() * 700 return item }) option = { title: { text: '股權信息' }, tooltip: { formatter: function (params) { //提示框自定義 console.log(params) let el = `<span>${params.data.name}</span>` el += `<br><span>持股比例：${params.data.proportion}</span>` return el }, }, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', series: [{ roam: true, draggable: false, // 這里必須設置成false，否則拖拽的時候，會有偏移 type: 'graph', //類型 layout: 'force', //一定要設置這個，不然節點無法拖動 nodes: nodes, links: links, symbolSize: function (value, params) { //改變節點大小 return 50 }, itemStyle: { color: "#66a6ff" }, // 設置文本信息 label: { show: true, // position: [25, 20], distance: 5, fontSize: 14, // align: "center", color: "#ffffff" }, autoCurveness: 0.01, //多條邊的時候，自動計算曲率 edgeLabel: { //邊的設置 show: true, position: "middle", fontSize: 12, formatter: (params) => { return params.data.relation.name; }, }, edgeSymbol: ["circle", "arrow"], //邊兩邊的類型 force: { repulsion: 100, gravity: 0.01, edgeLength: 200 } }, ], }; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); myChart.setOption(option); </script> </html>
效果圖如下：
