diff --git a/src/views/GroupEvolution/component/groupGraph.vue b/src/views/GroupEvolution/component/groupGraph.vue index 7dbbaf9..06a9f6e 100644 --- a/src/views/GroupEvolution/component/groupGraph.vue +++ b/src/views/GroupEvolution/component/groupGraph.vue @@ -174,7 +174,21 @@ const runForceLayout = () => { }) forceSimulator = curForceSimulator } +// 添加更新图表的函数 +const updateChart = (newGraphData) => { + if (!graphVis) { + initChart(); + return; + } + // 清除现有图表 + graphVis.clearAll(); + // 添加新数据 + graphVis.addGraph({ ...toRaw(newGraphData) }); + + // 重新运行力导向布局 + runForceLayout(); +} const initChart = () => { const getGroupCenters = (groupCount, width, height, radius = 200) => { // 三组分布在三角形顶点 @@ -229,10 +243,15 @@ const initChart = () => { graphVis.addGraph({ ...toRaw(graph.value) }) runForceLayout() } -onMounted(() => { - initChart() - -}) +watch( + graph, + (newValue) => { + if (newValue && Object.keys(newValue).length > 0) { + updateChart(newValue); + } + }, + { deep: true, immediate: true } +); onUnmounted(() => { if (graphVis) {