diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue index 9bb0d14d12a82f77b73907093537db9aa3b67706..0f603105d56ca143aa3ea4b113dbd2ca94cd447a 100644 --- a/src/components/HelloWorld.vue +++ b/src/components/HelloWorld.vue @@ -16,32 +16,7 @@ export default defineComponent({ name: 'Demo', components: {RelationGraph}, methods: { - test() { - const graphRef = this.$refs.graphRef - const __graph_json_data: RGJsonData = { - rootId: 'a', - nodes: [ - { id: 'a', text: 'A', borderColor: 'yellow' }, - { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' }, - { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 }, - { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 } - ], - lines: [ - { from: 'a', to: 'b', text: 'Line Text', color: '#43a2f1' }, - { from: 'a', to: 'c', text: 'Line Text' }, - { from: 'a', to: 'e', text: 'Line Text' }, - { from: 'b', to: 'e', text: '', color: '#67C23A' } - ] - }; - console.log(graphRef.value); - const graphInstance = graphRef.value!.getInstance(); - graphInstance.setJsonData(__graph_json_data).then(() => { - // 这些写上当图谱初始化完成后需要执行的代码 - - // graphInstance.moveToCenter(); - // graphInstance.zoomToFit(); - }); - } + }, setup() { const graphRef = ref(null); @@ -93,12 +68,41 @@ export default defineComponent({ console.log('onLineClick:', lineObject); }; + const test = () => { + + const __graph_json_data: RGJsonData = { + rootId: 'a', + nodes: [ + { id: 'a', text: 'A', borderColor: 'yellow' }, + { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' }, + { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 }, + { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }, + { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }, + ], + lines: [ + { from: 'a', to: 'b', text: 'Line Text', color: '#43a2f1' }, + { from: 'a', to: 'c', text: 'Line Text' }, + { from: 'a', to: 'e', text: 'Line Text' }, + { from: 'b', to: 'e', text: '', color: '#67C23A' } + ] + }; + console.log(graphRef.value); + const graphInstance = graphRef.value!.getInstance(); + graphInstance.setJsonData(__graph_json_data).then(() => { + // 这些写上当图谱初始化完成后需要执行的代码 + + // graphInstance.moveToCenter(); + // graphInstance.zoomToFit(); + }); + } + return { graphRef, graphOptions, showGraph, onNodeClick, - onLineClick + onLineClick, + test }; },