<!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>
<style>
html,
body {<!-- -->
width: 100%;
height: 100%;
}
.myChart {<!-- -->
width: 100%;
height: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<div id="myChart" class="myChart" />
</div>
<script src="./echart/echarts.min.js"></script>
<script>
function changeData() {<!-- -->
var data, linksData
data = [
{<!-- -->
name: 'Maria',
symbolSize: 100,
value: 40
},
{<!-- -->
name: 'Hongyu',
symbolSize: 50,
value:14
},
{<!-- -->
name: 'Ren Xiaoxian',
symbolSize: 60,
value: 22
}
]
linksData = [{<!-- -->
source: 'Maria',
target: 'Hongyu',
relationshipName: 'friend'
}, {<!-- -->
source: 'Maria',
target: 'imipramine',
relationshipName: 'friend'
}, {<!-- -->
source: 'Hongyu',
target: 'Ren Xiaoxian',
relationshipName: 'friend'
}, {<!-- -->
source: 'Maria',
target: 'Ren Xiaoxian',
relationshipName: 'colleague'
}, {<!-- -->
source: 'Maria',
target: 'Ren Xiaoxian',
relationshipName: 'family'
}, {<!-- -->
relationshipName: 'comrades',
target: 'Maria',
source: 'Ren Xiaoxian'
}, {<!-- -->
relationshipName: 'comrades',
target: 'Maria',
source: 'Hongyu'
}]
var arr = []
for (const i in linksData) {<!-- -->
linksData[i].count = 0
arr.push(linksData[i])
}
for (const i in linksData) {<!-- -->
for (const j in arr) {<!-- -->
if ((arr[j].count === 0) & amp; & amp; ((arr[j].source === linksData[i].source) & amp; & amp; (arr[j]. target === linksData[i].target)) || (arr[j].target === linksData[i].source) & amp; & amp; (arr[j].source === linksData[i ].target)) {<!-- -->
+ + linksData[i].count
}
}
}
for (const i in linksData) {<!-- -->
linksData[i].label = {<!-- -->
show: true,
formatter: function (x) {<!-- -->
return x.data.relationshipName // custom relationship name between lines
}
}
linksData[i].lineStyle = {<!-- -->
curveness: (linksData[i].count - 1) * 0.2 // line arc
}
}
return {<!-- -->
data, linksData
}
}
makeChart()
function makeChart() {<!-- -->
var myChart = echarts.init(document.getElementById('myChart'))
var list = changeData()
var data = list.data
var linksData = list. linksData
var option = {<!-- -->
backgroundColor: '#eeeeee', // set the background color
title: {<!-- -->
text: 'Character relationship diagram',
top: 12,
left: 12,
textStyle: {<!-- -->
fontSize: 14,
color: '#444444'
}
},
tooltip: {<!-- -->
// trigger: 'none'
formatter: function (params) {<!-- -->
if(params.dataType === 'node'){<!-- -->
return `${<!-- -->params.data.name} ${<!-- -->params.data.value}`
}
}
}, // prompt box
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{<!-- -->
type: 'graph',
layout: 'force',
// symbolSize: 100, // If this attribute is not in the link, it indicates the size of the node; otherwise, it is the size of the marks at both ends of the line
roam: true, // mouse zoom function
label: {<!-- -->
show: true // Whether to display the label
},
focusNodeAdjacency: true, // highlight nodes and neighbor nodes and edges when the mouse moves over the node
edgeSymbol: ['circle', 'arrow'], // The display form of both sides of the relationship, that is, the display form of the two ends of the line in the figure. arrow is an arrow
edgeSymbolSize: [6, 6], // Set the size of the arrows on both sides
draggable: true,
edgeLabel: {<!-- -->
fontSize: 14 // label font size on the relationship (ie line)
},
force: {<!-- -->
repulsion: 400, // repulsion factor value between nodes
edgeLength: 170 // distance between two nodes
},
data: data,
links: linksData,
lineStyle: {<!-- -->
opacity: 0.9,
width: 2,
color: 'red' // set line color 8ab7bd
// curvature: 0 // set the arc of the line
},
itemStyle: {<!-- -->
color: '#61a0a8',
fontSize: 12,
borderWidth: 1,
borderColor: '#ffffff',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 8
}
}
]
}
myChart. setOption(option, true)
setTimeout(function () {<!-- -->
window.onresize = function () {<!-- -->
myChart. resize()
}
}, 200)
}
</script>
</body>
</html>
