<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: ""
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: "quinticInOut",
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
}
},
legend: {
x: "center",
show: false,
data: ["", "", ""]
},
series: [{
type: "graph",
layout: "force",
symbolSize: 45,
focusNodeAdjacency: true,
roam: true,
categories: [{
name: "",
itemStyle: {
normal: {
color: "-sharp009800",
}
}
}, {
name: "",
itemStyle: {
normal: {
color: "-sharp4592FF",
}
}
}, {
name: "",
itemStyle: {
normal: {
color: "-sharp3592F",
}
}
}],
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
}
},
force: {
repulsion: 1000
},
edgeSymbolSize: [4, 50],
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
formatter: "{c}"
}
},
data: [{
name: "",
draggable: true,
}, {
name: "",
category: 1,
draggable: true,
}, {
name: "",
category: 1,
draggable: true,
}, {
name: "",
category: 1,
draggable: true,
}, {
name: "",
category: 1,
draggable: true,
}, {
name: "",
category: 1,
draggable: true,
}, {
name: "",
category: 1,
draggable: true,
}, {
name: "",
category: 1,
draggable: true,
}, {
name: "",
category: 1,
draggable: true,
}, {
name: "",
category: 1,
draggable: true,
}, {
name: "",
category: 1,
draggable: true,
}, {
name: "",
category: 1,
draggable: true,
}, {
name: "",
category: 1,
draggable: true,
}],
links: [{
source: 0,
target: 1,
category: 0,
value: ""
}, {
source: 0,
target: 2,
value: ""
}, {
source: 0,
target: 3,
value: ""
}, {
source: 0,
target: 4,
value: ""
}, {
source: 1,
target: 2,
value: ""
}, {
source: 0,
target: 5,
value: ""
}, {
source: 4,
target: 5,
value: ""
}, {
source: 2,
target: 8,
value: ""
}, {
source: 0,
target: 12,
value: ""
}, {
source: 6,
target: 11,
value: ""
}, {
source: 6,
target: 3,
value: ""
}, {
source: 7,
target: 5,
value: ""
}, {
source: 9,
target: 10,
value: ""
}, {
source: 3,
target: 10,
value: ""
}, {
source: 2,
target: 11,
value: ""
}],
lineStyle: {
normal: {
opacity: 0.9,
width: 1,
curveness: 0
}
}
}]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>how does this change the data? how are the data of 13 people in data and 15 pieces of data in links bound? how do you combine the data into a specified location? I was confused for a long time
Thank you for answering my question