<!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: '玛丽亚',
symbolSize: 100,
value:40
},
{
name: '宏宇',
symbolSize: 50,
value:14
},
{
name: '任小仙',
symbolSize: 60,
value:22
}
]
linksData = [{
source: '玛丽亚',
target: '宏宇',
relationshipName: '朋友'
}, {
source: '玛丽亚',
target: 'imipramine',
relationshipName: '朋友'
}, {
source: '宏宇',
target: '任小仙',
relationshipName: '朋友'
}, {
source: '玛丽亚',
target: '任小仙',
relationshipName: '同事'
}, {
source: '玛丽亚',
target: '任小仙',
relationshipName: '家人'
}, {
relationshipName: '战友',
target: '玛丽亚',
source: '任小仙'
}, {
relationshipName: '战友',
target: '玛丽亚',
source: '宏宇'
}]
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) && ((arr[j].source === linksData[i].source) && (arr[j].target === linksData[i].target)) || (arr[j].target === linksData[i].source) && (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 // 自定义线条之间的关系名称
}
}
linksData[i].lineStyle = {
curveness: (linksData[i].count - 1) * 0.2 // 线条弧度
}
}
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', // 设置背景颜色
title: {
text: '人物关系图',
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}`
}
}
}, // 提示框
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'force',
// symbolSize: 100, // 倘若该属性不在link里，则其表示节点的大小；否则即为线两端标记的大小
roam: true, // 鼠标缩放功能
label: {
show: true // 是否显示标签
},
focusNodeAdjacency: true, // 鼠标移到节点上时突出显示结点以及邻节点和边
edgeSymbol: ['circle', 'arrow'], // 关系两边的展现形式，也即图中线两端的展现形式。arrow为箭头
edgeSymbolSize: [6, 6], // 设置两边箭头大小
draggable: true,
edgeLabel: {
fontSize: 14 // 关系（也即线）上的标签字体大小
},
force: {
repulsion: 400, // 节点之间的斥力因子值
edgeLength: 170 // 两个节点之间的距离
},
data: data,
links: linksData,
lineStyle: {
opacity: 0.9,
width: 2,
color: 'red' // 设置线条颜色 8ab7bd
// curveness: 0 // 设置线条的弧度
},
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>
