优化连线清晰度
This commit is contained in:
parent
d38296b160
commit
af78b43c7e
|
|
@ -28,7 +28,6 @@ const initChart = () => {
|
||||||
chart = echarts.init(document.getElementById("container"))
|
chart = echarts.init(document.getElementById("container"))
|
||||||
|
|
||||||
//处理社团节点
|
//处理社团节点
|
||||||
|
|
||||||
const nodes = Object.values(inject("communityNodeList") ?? []).map((item) => ({
|
const nodes = Object.values(inject("communityNodeList") ?? []).map((item) => ({
|
||||||
id: item.id,
|
id: item.id,
|
||||||
name: item.id,
|
name: item.id,
|
||||||
|
|
@ -43,8 +42,10 @@ const initChart = () => {
|
||||||
|
|
||||||
//处理连边
|
//处理连边
|
||||||
const links = []
|
const links = []
|
||||||
|
const newSet = new Set()
|
||||||
nodes.forEach((communityNode) => {
|
nodes.forEach((communityNode) => {
|
||||||
communityNode.neighbors.forEach((communityNei) => {
|
communityNode.neighbors.forEach((communityNei) => {
|
||||||
|
if (newSet.has(communityNei.id)) return
|
||||||
links.push({
|
links.push({
|
||||||
source: communityNode.id,
|
source: communityNode.id,
|
||||||
target: communityNei.id,
|
target: communityNei.id,
|
||||||
|
|
@ -52,14 +53,15 @@ const initChart = () => {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: communityNei.isHidden ? 4 : 1, // 无互动=细线,有互动=加粗
|
width: communityNei.isHidden ? 4 : 1, // 无互动=细线,有互动=加粗
|
||||||
color: communityNei.isHidden ? props.interactionStore.predictionLineColor : "#37ACD7", // 无互动=灰色,有互动=黄色
|
color: communityNei.isHidden ? props.interactionStore.predictionLineColor : "#37ACD7", // 无互动=灰色,有互动=黄色
|
||||||
|
opacity: communityNei.isHidden ? 1 : 0.8, // 可选:调整透明度增强模糊感
|
||||||
type: communityNei.isHidden ? "dashed" : "solid" // 无互动=实线,有互动=虚线
|
type: communityNei.isHidden ? "dashed" : "solid" // 无互动=实线,有互动=虚线
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
newSet.add(communityNode.id) // 添加当前社团节点id到集合中,避免重复添加
|
||||||
})
|
})
|
||||||
|
|
||||||
const data = { nodes, links }
|
const data = { nodes, links }
|
||||||
console.log(data)
|
|
||||||
|
|
||||||
const categories = [
|
const categories = [
|
||||||
{ name: "普通社团", category: 0, icon: "circle" },
|
{ name: "普通社团", category: 0, icon: "circle" },
|
||||||
|
|
@ -198,7 +200,9 @@ const initChart = () => {
|
||||||
]),
|
]),
|
||||||
|
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
borderColor: node.selfIncludeImplicitRelationship ? "#f8bf38" : "#46C6AD",
|
borderColor: node.selfIncludeImplicitRelationship
|
||||||
|
? props.interactionStore.predictionLineColor
|
||||||
|
: "#46C6AD",
|
||||||
borderWidth: node.selfIncludeImplicitRelationship ? 3 : 1,
|
borderWidth: node.selfIncludeImplicitRelationship ? 3 : 1,
|
||||||
shadowBlur: 4,
|
shadowBlur: 4,
|
||||||
borderType: "dashed",
|
borderType: "dashed",
|
||||||
|
|
@ -235,6 +239,8 @@ const initChart = () => {
|
||||||
|
|
||||||
const handleClickNode = () => {
|
const handleClickNode = () => {
|
||||||
chart.on("click", function (params) {
|
chart.on("click", function (params) {
|
||||||
|
console.log(params)
|
||||||
|
|
||||||
if (params.dataType === "node") {
|
if (params.dataType === "node") {
|
||||||
emit("click:node", params.data)
|
emit("click:node", params.data)
|
||||||
} else if (params.dataType == "edge") {
|
} else if (params.dataType == "edge") {
|
||||||
|
|
|
||||||
|
|
@ -294,8 +294,9 @@ const initChart = async () => {
|
||||||
edge: child.isHidden ? 1 : 0,
|
edge: child.isHidden ? 1 : 0,
|
||||||
interactionTimes: child.interactionTime,
|
interactionTimes: child.interactionTime,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: child.isHidden ? 4 : edgeWidth(child.interactionTime),
|
width: child.isHidden ? 7 : edgeWidth(child.interactionTime),
|
||||||
color: child.isHidden ? props.interactionStore.predictionLineColor : "#37ACD7", // 无互动=灰色,有互动=黄色
|
color: child.isHidden ? props.interactionStore.predictionLineColor : "#37ACD7", // 无互动=灰色,有互动=黄色
|
||||||
|
opacity: child.isHidden ? 1 : 0.5, // 可选:调整透明度增强模糊感
|
||||||
type: child.isHidden ? "dashed" : "solid" // 无互动=实线,有互动=虚线
|
type: child.isHidden ? "dashed" : "solid" // 无互动=实线,有互动=虚线
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -424,7 +425,7 @@ const initChart = async () => {
|
||||||
zoom: 0.1,
|
zoom: 0.1,
|
||||||
categories: categories,
|
categories: categories,
|
||||||
force: {
|
force: {
|
||||||
edgeLength: 2500,
|
edgeLength: 4000,
|
||||||
repulsion: 4000,
|
repulsion: 4000,
|
||||||
gravity: 0.1,
|
gravity: 0.1,
|
||||||
friction: 0.02,
|
friction: 0.02,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user