// data
const items = res.data.network.items
let data = items.map((item, index) => {
return {
id: index, // Subscript number Note: If the ID is set in data, the following flag must be associated in link. If not set, the default is associated via name
name: item.id, // The name value of the node
symbolSize: Math.log(item.weights.Documents) * 2, // Control the node size, Log logarithm processing is used here
x: item.x, // x-axis coordinates
y: item.y, // y-axis coordinates
value: item.weights.Documents, // The value of the node
category: item.cluster - 1 // Category
}
})
// Name of each node
let ids = items.map((item) => {
return { name: item.id }
})
// Handle link
const links = res.data.network.links
let link = links.map((item, index) => {
return {
// source: item.source_id, // Note: If the ID is set in data, the following flag must be as association in link. If not set, the default association is via name
// target: item.target_id, // Note: If the ID is set in data, the following flag must be as association in link. If not set, the default association is through name
source: ids.findIndex((val) => val.name === item.source_id), // Get subscript from each node
target: ids.findIndex((val) => val.name === item.target_id), // Get subscript from each node
value: item.strength,
lineStyle: {
width: item.strength / 3000,
color: '#d2d2d2', // The color of the line [ default: '#aaa' ] #d2d2d2
// If the color of the source line is the source node color
// color: { Custom gradient color
// colorStops: [
// { offset: 0, color: 'red' }, // Gradient start color
// { offset: 1, color: 'yellow' } // Gradient end color
// ],
// },
type: 'solid', // Type of line [ default: solid solid line ] 'dashed' dotted line 'dotted'
opacity: .8, // Graphic transparency. Supports numbers from 0 to 1, and the figure is not drawn when 0. [ default: 0.5 ]
curveness: 0.3 // The curvature of the edge supports values from 0 to 1. The larger the value, the greater the curvature. [ default: 0 ]
}
}
})
const option = {
toolbox: {
show: true,
feature: {
restore: { show: true }, // Restore configuration items.
saveAsImage: { show: true } // Save the picture
},
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, // Whether to enable mouse zoom and pan roaming. Not enabled by default. If you just want to enable zoom or pan, you can set it to 'scale' or 'move'. Set to true to enable
emphasis: { // Whether to highlight the node and the edges and adjacency nodes of the node when the mouse is moved to the node. (Highlight)
focus: "adjacency",
// 'none' does not fade out other graphics, this configuration is used by default.
// 'self' Only the graph that focuses (not fades out) the currently highlighted data.
// 'series' focuses on all graphics in the series where the currently highlighted data resides. 'adjacency' focuses on the graph of adjacency points and edges in the graph.
},
// Marked graphics
symbol: 'circle',
// Common line style of relationship edges. Among them, it supports setting to 'source' or 'target' special value. At this time, the edge will automatically take the color of the source node or target node as its own color.
// Tags on the relational object
label: {
show: true, // Whether to display the label
position: "inside", // Tag location
fontSize: 16,
color: 'black',
formatter: (params) => {
if (params.data.symbolSize > 30) {
return params.data.name
}
}
},
// Tags on the line connecting two relational objects
edgeLabel: {
show: false,
fontSize: 14,
formatter: function(param) { // Tag content
return param.data.category;
}
},
// Node data
data: data,
// Node category
categories: categories,
// Relationship data between nodes
links: link
}
]
}
