提交 f8767279 authored 作者: 刘宇琪's avatar 刘宇琪

fix g6 liuyuqi

上级 13f19f4e
<template> <template>
<div class="relation-graph-wrapper"> <div class="relation-graph-wrapper">
<div class="graph-controls"> <div class="graph-controls">
<div <div v-for="item in controlBtns" :key="item.type"
v-for="item in controlBtns"
:key="item.type"
:class="['control-btn', { 'control-btn-active': currentLayoutType === item.type }]" :class="['control-btn', { 'control-btn-active': currentLayoutType === item.type }]"
@click="handleClickControlBtn(item.type)" @click="handleClickControlBtn(item.type)">
>
<img :src="item.icon" alt="" /> <img :src="item.icon" alt="" />
</div> </div>
</div> </div>
<div ref="containerRef" class="graph-container"></div> <div ref="containerRef" class="graph-container"></div>
<div v-if="selectedNode" class="node-popup"> <div v-if="selectedNode" class="node-popup">
<div class="popup-header"> <div class="popup-header">
<img :src="selectedNode.image || defaultIcon" alt="" class="popup-icon" /> <img :src="selectedNode.image || defaultIcon" alt="" class="popup-icon" />
...@@ -33,9 +30,8 @@ ...@@ -33,9 +30,8 @@
<script setup> <script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue' import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { Graph, TreeGraph } from '@antv/g6' import G6 from '@antv/g6'
import { Close } from '@element-plus/icons-vue' import { Close } from '@element-plus/icons-vue'
import echartsIcon01 from '../assets/echartsicon01.png' import echartsIcon01 from '../assets/echartsicon01.png'
import echartsIcon02 from '../assets/echartsicon02.png' import echartsIcon02 from '../assets/echartsicon02.png'
import echartsIcon03 from '../assets/echartsicon03.png' import echartsIcon03 from '../assets/echartsicon03.png'
...@@ -107,7 +103,7 @@ const initNormalGraph = (layoutType, width, height) => { ...@@ -107,7 +103,7 @@ const initNormalGraph = (layoutType, width, height) => {
alphaMin: 0.001 alphaMin: 0.001
} }
graphInstance.value = new Graph({ graphInstance.value = new G6.Graph({
container: containerRef.value, container: containerRef.value,
width, width,
height, height,
...@@ -236,7 +232,7 @@ const initCircularGraph = (width, height) => { ...@@ -236,7 +232,7 @@ const initCircularGraph = (width, height) => {
centerNode.fy = centerY centerNode.fy = centerY
} }
graphInstance.value = new Graph({ graphInstance.value = new G6.Graph({
container: containerRef.value, container: containerRef.value,
width, width,
height, height,
...@@ -342,7 +338,7 @@ const initTreeGraph = (width, height) => { ...@@ -342,7 +338,7 @@ const initTreeGraph = (width, height) => {
if (!treeDataSource) return if (!treeDataSource) return
graphInstance.value = new TreeGraph({ graphInstance.value = new G6.TreeGraph({
container: containerRef.value, container: containerRef.value,
width, width,
height, height,
...@@ -523,7 +519,7 @@ const processGraphData = (rawData) => { ...@@ -523,7 +519,7 @@ const processGraphData = (rawData) => {
rawData.nodes.forEach((node, index) => { rawData.nodes.forEach((node, index) => {
const nodeId = String(node.id || index) const nodeId = String(node.id || index)
if (nodeMap.has(nodeId)) { if (nodeMap.has(nodeId)) {
return return
} }
...@@ -797,4 +793,4 @@ defineExpose({ ...@@ -797,4 +793,4 @@ defineExpose({
} }
} }
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论