echarts graph（关系图），force（力引导布局），circular（环形布局）
// 数据
const items = res.data.network.items
let data = items.map((item, index) => {
return {
id: index, // 下标序号 注意：如果data中设置了ID，link中必须以下标作为关联，如果不设置，默认通过name关联
name: item.id, // 节点的name值
symbolSize: Math.log(item.weights.Documents) * 2, // 控制节点大小,这里使用的是Log对数处理
x: item.x, // x轴坐标
y: item.y, // y轴坐标
value: item.weights.Documents, // 节点的值
category: item.cluster - 1 // 类目
}
})
// 每个节点的名称
let ids = items.map((item) => {
return { name: item.id }
})
// 处理link
const links = res.data.network.links
let link = links.map((item, index) => {
return {
// source: item.source_id, // 注意：如果data中设置了ID，link中必须以下标作为关联，如果不设置，默认通过name关联
// target: item.target_id, // 注意：如果data中设置了ID，link中必须以下标作为关联，如果不设置，默认通过name关联
source: ids.findIndex((val) => val.name === item.source_id), // 从每个节点中获取下标
target: ids.findIndex((val) => val.name === item.target_id), // 从每个节点中获取下标
value: item.strength,
lineStyle: {
width: item.strength / 3000,
color: '#d2d2d2', // 线的颜色[ default: '#aaa' ] #d2d2d2
// 如果source线的颜色为source的节点颜色
// color: { 自定义渐变色
// colorStops: [
// { offset: 0, color: 'red' }, // 渐变起始颜色
// { offset: 1, color: 'yellow' } // 渐变结束颜色
// ],
// },
type: 'solid', // 线的类型[ default: solid 实线 ] 'dashed' 虚线 'dotted'
opacity: .8, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。[ default: 0.5 ]
curveness: 0.3 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。[ default: 0 ]
}
}
})
const option = {
toolbox: {
show: true,
feature: {
restore: { show: true }, // 配置项还原。
saveAsImage: { show: true } // 保存图片
},
right: "1%",
top: "1%"
},
title: {
text: '',
color: 'white',
left: "30px",
top: "20px"
},
tooltip: {
show: true,
trigger: 'item',
},
legend: {
left: "center",
bottom: "1%"
},
xAxis: {
show: false
},
yAxis: {
show: false
},
series: [
{
tooltip: {
show: true,
trigger: 'item',
formatter: (params) => {
const count = links.filter((item) => item.target_id === params.name).length
const data = params.data
if (data.name) {
return '<p>name：' + data.name + '</p>' +
'<p>value：' + data.value + '</p>' +
'<p>links：' + count + '</p>'
}
}
},
type: "graph",
layout: 'none',
zoom: 1,
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
emphasis: { // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。（高亮）
focus: "adjacency",
// 'none' 不淡出其它图形，默认使用该配置。
// 'self' 只聚焦（不淡出）当前高亮的数据的图形。
// 'series' 聚焦当前高亮的数据所在的系列的所有图形。'adjacency' 聚焦关系图中的邻接点和边的图形。
},
// 标记的图形
symbol: 'circle',
// 关系边的公用线条样式。其中 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。
// 关系对象上的标签
label: {
show: true, // 是否显示标签
position: "inside", // 标签位置
fontSize: 16,
color: 'black',
formatter: (params) => {
if (params.data.symbolSize > 30) {
return params.data.name
}
}
},
// 连接两个关系对象的线上的标签
edgeLabel: {
show: false,
fontSize: 14,
formatter: function(param) { // 标签内容
return param.data.category;
}
},
// 节点数据
data: data,
// 节点类目
categories: categories,
// 节点间的关系数据
links: link
}
]
}