This commit is contained in:
duanhao 2025-08-01 14:52:03 +08:00
commit b0a09203d3
2 changed files with 35 additions and 16 deletions

View File

@ -35,6 +35,7 @@ const initChart = () => {
nodesNum: item.nodesNum, nodesNum: item.nodesNum,
neighbors: item.neighbors, neighbors: item.neighbors,
category: item.isIncludePredictNodes ? 1 : 0, category: item.isIncludePredictNodes ? 1 : 0,
selfIncludeImplicitRelationship: selfIncludeImplicitRelationship:
item.neighbors.map((nei) => nei.id).includes(item.id) && //id item.neighbors.map((nei) => nei.id).includes(item.id) && //id
item.neighbors.find((nei) => nei.id == item.id).isHidden item.neighbors.find((nei) => nei.id == item.id).isHidden

View File

@ -65,7 +65,7 @@ import {
nextTick, nextTick,
defineProps defineProps
} from "vue" } from "vue"
import { TansTimestamp } from "@/utils/transform" import { TansTimestamp, getAvatarUrl } from "@/utils/transform"
import nodeHoverImg from "@/assets/images/nodeHover.png" import nodeHoverImg from "@/assets/images/nodeHover.png"
import * as echarts from "echarts" import * as echarts from "echarts"
import { storeToRefs } from "pinia" import { storeToRefs } from "pinia"
@ -297,6 +297,8 @@ const initChart = async () => {
nodes = props.interactionStore.communityDetailNodeList.map((item) => ({ nodes = props.interactionStore.communityDetailNodeList.map((item) => ({
id: item.userId, id: item.userId,
name: item.userName, name: item.userName,
defaultAvatar: getAvatarUrl(item.defaultAvatar),
activeAvatar: getAvatarUrl(item.activeAvatar),
symbolSize: 40, symbolSize: 40,
postNum: item.postNum, postNum: item.postNum,
fancy: item.fans fancy: item.fans
@ -453,6 +455,8 @@ const initChart = async () => {
animationDurationUpdate: 3500, // animationDurationUpdate: 3500, //
data: chartsData.value.nodes.map((node) => ({ data: chartsData.value.nodes.map((node) => ({
...node, ...node,
symbol: node.defaultAvatar ? `image://${node.defaultAvatar}` : "circle",
symbolSize: node.defaultAvatar ? 140 : 40,
itemStyle: { itemStyle: {
color: new echarts.graphic.RadialGradient(0.98, 0.38, 0.9, [ color: new echarts.graphic.RadialGradient(0.98, 0.38, 0.9, [
{ offset: 1, color: "#1a3860" }, // { offset: 1, color: "#1a3860" }, //
@ -490,23 +494,37 @@ const initChart = async () => {
const highLightUserNodes = (userIds) => { const highLightUserNodes = (userIds) => {
if (!userIds) return if (!userIds) return
chart.dispatchAction({ // activeAvatar
type: "downplay", chartsData.value.nodes.forEach((node) => {
seriesIndex: 0 if (userIds.includes(node.id) && node.activeAvatar) {
}) node.symbol = `image://${node.activeAvatar}`
node.symbolSize = 140
} else {
node.symbol = "circle"
node.symbolSize = 40
node.itemStyle = {
color: new echarts.graphic.RadialGradient(0.98, 0.38, 0.9, [
{ offset: 1, color: "#1a3860" }, //
{ offset: 0.5, color: "#38546b" }, //
{ offset: 0, color: "#5fb3b3" } //
]),
setTimeout(() => { opacity: 1,
// borderColor: "#46C6AD",
userIds.forEach((id) => { borderWidth: 1,
const index = chartsData.value.nodes.findIndex((node) => node.id === id) shadowBlur: 4,
if (index != -1) { borderType: "dashed",
chart.dispatchAction({ shadowColor: "rgba(19, 27, 114, 0.25)"
type: "highlight", }
dataIndex: index
})
} }
}) })
}, 1000) chart.setOption({
series: [
{
data: chartsData.value.nodes
}
]
})
} }
onMounted(() => { onMounted(() => {