From fafe60432341b9a1ccd3c0b24bfb58de3db8b464 Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Fri, 8 Dec 2023 17:26:40 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=B1=BB=E5=9E=8B=E5=BC=82=E5=B8=B8?= =?UTF-8?q?=E5=AF=BC=E8=87=B4=E7=BC=96=E8=AF=91=E5=A4=B1=E8=B4=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ChartGraphG6/index.vue | 210 +++++++++++++------------- 1 file changed, 101 insertions(+), 109 deletions(-) diff --git a/src/components/ChartGraphG6/index.vue b/src/components/ChartGraphG6/index.vue index f37aa18d..87579551 100644 --- a/src/components/ChartGraphG6/index.vue +++ b/src/components/ChartGraphG6/index.vue @@ -51,26 +51,31 @@ const ExtGraph = extend(Graph, { // }, edges: { 'polyline-edge': Extensions.PolylineEdge, - 'custom-edge': Extensions.CubicEdge, + 'cubic-edge': Extensions.CubicEdge, + // 'custom-edge': Extensions.CubicEdge, }, }); const data = { nodes: [ + // 0 基站 { id: '0', data: { - x: 100, - y: 100, + x: 80, + y: 150, type: 'circle-node', - color: '#5a99d5', + color: '#fffff', keyShape: { - r: 32, + r: 24, width: 48, height: 48, + fill: '#9EC9FF', + stroke: '#5B8FF9', + lineWidth: 2, }, labelShape: { - text: '基站222222222222222222', + text: '基站', position: 'bottom', maxWidth: '200%', offsetY: 10, @@ -78,39 +83,12 @@ const data = { labelBackgroundShape: {}, iconShape: { img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - width: 48, - height: 48, - }, - animates: { - update: [ - { - fields: ['opacity'], - shapeId: 'haloShape', - states: ['breathing'], - iterations: Infinity, - direction: 'alternate', - duration: 500, - }, - { - fields: ['lineWidth'], - shapeId: 'keyShape', - states: ['breathing'], - iterations: Infinity, - direction: 'alternate', - duration: 500, - }, - { - fields: ['height', 'width'], - shapeId: 'keyShape', - states: ['scaling'], - iterations: Infinity, - direction: 'alternate', - duration: 500, - }, - ], + width: 24, + height: 24, }, }, }, + // 1 DM { id: '1', data: { @@ -119,6 +97,7 @@ const data = { y: 350, }, }, + // 2 O&M { id: '2', data: { @@ -237,7 +216,7 @@ const data = { source: '0', target: 'combo-5gc', data: { - type: 'custom-edge', + type: 'cubic-edge', animates: { update: [ { @@ -468,7 +447,7 @@ function initChart() { type: 'lod-controller', disableLod: true, }, - ], + ] as any, modes: { default: [ { @@ -489,7 +468,7 @@ function initChart() { 'drag-canvas', // 'click-select', 'zoom-canvas', - ], + ] as any, }, theme: { @@ -500,73 +479,85 @@ function initChart() { dataTypeField: 'parentId', }, }, + } as any, + // 全局节点 矩形 + node: model => { + const { id, data } = model; + return { + id, + data: { + type: 'rect-node', + keyShape: { + width: 80, + height: 40, + radius: 8, + }, + labelShape: { + position: 'center', + text: data.label, + }, + animates: { + update: [ + { + fields: ['opacity'], + shapeId: 'haloShape', + states: ['breathing'], + iterations: Infinity, + direction: 'alternate', + duration: 500, + }, + { + fields: ['lineWidth'], + shapeId: 'keyShape', + states: ['breathing'], + iterations: Infinity, + direction: 'alternate', + duration: 500, + }, + { + fields: ['height', 'width'], + shapeId: 'keyShape', + states: ['scaling'], + iterations: Infinity, + direction: 'alternate', + duration: 500, + }, + ], + }, + ...data, + }, + }; }, - // node: model => { - // const { id, data } = model; - // return { - // id, - // data: { - // ...data, - // type: 'rect-node', - // keyShape: { - // width: 80, - // height: 40, - // radius: 8, - // }, - // labelShape: { - // position: 'center', - // text: data.label, - // }, - // animates: { - // update: [ - // { - // fields: ['opacity'], - // shapeId: 'haloShape', - // states: ['breathing'], - // iterations: Infinity, - // direction: 'alternate', - // duration: 500, - // }, - // { - // fields: ['lineWidth'], - // shapeId: 'keyShape', - // states: ['breathing'], - // iterations: Infinity, - // direction: 'alternate', - // duration: 500, - // }, - // { - // fields: ['height','width'], - // shapeId: 'keyShape', - // states: ['scaling'], - // iterations: Infinity, - // direction: 'alternate', - // duration: 500, - // }, - // ], - // }, - // }, - // }; - // }, - edge: { - animates: { - update: [ - { - fields: ['lineDash'], - shapeId: 'keyShape', - states: ['growing', 'running'], - iterations: Infinity, - duration: 2000, + // 全局边 三次贝塞尔曲线 + edge: model => { + const { id, source, target, data } = model; + return { + id, + source, + target, + data: { + type: 'cubic-edge', + animates: { + update: [ + { + fields: ['lineDash'], + shapeId: 'keyShape', + states: ['growing', 'running'], + iterations: Infinity, + duration: 2000, + }, + { + fields: ['offsetDistance'], + shapeId: 'buShape', + states: ['circleRunning'], + iterations: Infinity, + duration: 2000, + }, + ], }, - { - fields: ['offsetDistance'], - shapeId: 'buShape', - states: ['circleRunning'], - iterations: Infinity, - duration: 2000, - }, - ], - }, + ...data, + }, + }; }, combo: model => { const { id, data } = model; @@ -596,6 +587,7 @@ function initChart() { }, }; }, + // 节点状态 nodeState: { breathing: { haloShape: { @@ -613,7 +605,7 @@ function initChart() { height: 60, }, }, - }, + } as any, edgeState: { growing: { keyShape: { @@ -693,7 +685,7 @@ function initChart() { const actions = { 'Enable/Disable Node States': { Breathing: () => { - graph.getAllNodesData().forEach(node => { + graph.getAllNodesData().forEach((node:any) => { if (graph.getItemState(node.id, 'breathing')) { graph.setItemState(node.id, 'breathing', false); } else { @@ -703,7 +695,7 @@ const actions = { }); }, Scaling: () => { - graph.getAllNodesData().forEach(node => { + graph.getAllNodesData().forEach((node:any) => { if (graph.getItemState(node.id, 'scaling')) { graph.setItemState(node.id, 'scaling', false); } else { @@ -715,7 +707,7 @@ const actions = { }, 'Enable/Disable Edge States': { Growing: () => { - graph.getAllEdgesData().forEach(edge => { + graph.getAllEdgesData().forEach((edge:any) => { if (graph.getItemState(edge.id, 'growing')) { graph.setItemState(edge.id, 'growing', false); } else { @@ -725,7 +717,7 @@ const actions = { }); }, Running: () => { - graph.getAllEdgesData().forEach(edge => { + graph.getAllEdgesData().forEach((edge:any) => { if (graph.getItemState(edge.id, 'running')) { graph.setItemState(edge.id, 'running', false); } else {