Wed Apr 17 14:45:00 CST 2024 inscode

src/components/HelloWorld.vue

-<template>
-  <div>
-    <button @click="">测试</button>
-    <div style="height:calc(80vh);">
-      <RelationGraph ref="graphRef" :options="graphOptions" @node-click="onNodeClick" @line-click="onLineClick" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue';
-import RelationGraph from 'relation-graph/vue3';
-import type { RGOptions, RGJsonData, RGNode, RGLine, RGLink, RGUserEvent, RelationGraphComponent } from 'relation-graph/vue3';
-
-export default defineComponent({
-  name: 'Demo',
-  components: {RelationGraph},
-  setup() {
-    const graphRef = ref<RelationGraphComponent | null>(null);
-    const graphOptions: RGOptions = {
-      debug: false,
-      allowSwitchLineShape: true,
-      allowSwitchJunctionPoint: true,
-      allowShowDownloadButton: true,
-      defaultJunctionPoint: 'border'
-      // 这里可以参考"Graph 图谱"中的参数进行设置
-
-    };
-
-    onMounted(() => {
-      showGraph();
-    });
-
-    const showGraph = () => {
-      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();
-      });
-    };
-
-    const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
-      console.log('onNodeClick:', nodeObject);
-    };
-
-    const onLineClick = (lineObject: RGLine, linkObject: RGLink, $event: RGUserEvent) => {
-      console.log('onLineClick:', lineObject);
-    };
-
-    return {
-      graphRef,
-      graphOptions,
-      showGraph,
-      onNodeClick,
-      onLineClick
-
-    };
-  }
-});
-</script>
-
-<style lang="scss">
-
-</style>
-
-<style lang="scss" scoped>
-
-</style>