add demo page

doc/demo/Demo4AdvDynamicData.vue

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <div style="height:50px;padding-top:6px;padding-left: 30px;padding-right:30px;border-bottom: #efefef solid 1px;">
+      <el-button :disabled="level2DataIsloaded" type="success" @click="loadNextLevel2Data">加载第2层数据</el-button>
+      <el-button :disabled="level3DataIsloaded" type="success" @click="loadNextLevel3Data">加载第3层数据</el-button>
+      <el-button style="float: right;" type="success" @click="isShowCodePanel=true">查看代码</el-button>
+    </div>
+    <div style="height:calc(100vh - 50px);">
+      <RelationGraph
+        ref="seeksRelationGraph"
+        :options="graphOptions"
+        :on-node-click="onNodeClick"
+        :on-line-click="onLineClick"
+      />
+    </div>
+    <el-drawer
+      title="node option:"
+      direction="rtl"
+      size="50%"
+      custom-class="c-drawer-window"
+      :modal="false"
+      :visible.sync="isShowCodePanel"
+      :with-header="false"
+    >
+      <iframe src="/relation-graph-codes/Demo4Logo.html" width="100%" height="100%" frameborder="0" scrolling="auto" style="" />
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import RelationGraph from 'relation-graph'
+export default {
+  name: 'Demo',
+  components: { RelationGraph },
+  data() {
+    return {
+      level2DataIsloaded: false,
+      level3DataIsloaded: false,
+      isShowCodePanel: false,
+      graphOptions: {
+        defaultNodeBorderWidth: 0,
+        defaultNodeColor: 'rgba(238, 178, 94, 1)',
+        allowSwitchLineShape: true,
+        allowSwitchJunctionPoint: true,
+        defaultLineShape: 1,
+        'layouts': [
+          {
+            'label': '中心',
+            'layoutName': 'center',
+            'layoutClassName': 'seeks-layout-center'
+          }
+        ],
+        defaultJunctionPoint: 'border'
+
+        // 这里可以参考"Graph 图谱"中的参数进行设置
+      }
+    }
+  },
+  mounted() {
+    this.showSeeksGraph()
+  },
+  methods: {
+    showSeeksGraph(query) {
+      var __graph_json_data = {
+        rootId: '2',
+        nodes: [
+          { id: '1', name: '节点-1', myicon: 'el-icon-star-on' },
+          { id: '2', name: '节点-2', myicon: 'el-icon-setting' },
+          { id: '4', name: '节点-4', myicon: 'el-icon-star-on' },
+          { id: '6', name: '节点-6', myicon: 'el-icon-setting' },
+          { id: '7', name: '节点-7', myicon: 'el-icon-setting' },
+          { id: '8', name: '节点-8', myicon: 'el-icon-star-on' },
+          { id: '9', name: '节点-9', myicon: 'el-icon-headset' }
+        ],
+        links: [
+          { from: '1', to: '2', text: '投资' },
+          { from: '4', to: '2', text: '高管' },
+          { from: '6', to: '2', text: '高管' },
+          { from: '7', to: '2', text: '高管' },
+          { from: '8', to: '2', text: '高管' },
+          { from: '9', to: '2', text: '高管' }
+        ]
+      }
+      this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
+        // 这些写上当图谱初始化完成后需要执行的代码
+      })
+    },
+    loadNextLevel2Data() {
+      this.level2DataIsloaded = true
+      var __graph_json_data = {
+        rootId: '2',
+        nodes: [
+          { id: '3', name: '节点-3', myicon: 'el-icon-setting' },
+          { id: '71', name: '节点-71', myicon: 'el-icon-headset' },
+          { id: '72', name: '节点-72', myicon: 'el-icon-s-tools' },
+          { id: '73', name: '节点-73', myicon: 'el-icon-star-on' },
+          { id: '81', name: '节点-81', myicon: 'el-icon-s-promotion' },
+          { id: '82', name: '节点-82', myicon: 'el-icon-s-promotion' },
+          { id: '83', name: '节点-83', myicon: 'el-icon-star-on' },
+          { id: '84', name: '节点-84', myicon: 'el-icon-s-promotion' },
+          { id: '85', name: '节点-85', myicon: 'el-icon-sunny' },
+          { id: '91', name: '节点-91', myicon: 'el-icon-sunny' },
+          { id: '92', name: '节点-82', myicon: 'el-icon-sunny' },
+          { id: '5', name: '节点-5', myicon: 'el-icon-sunny' }
+        ],
+        links: [
+          { from: '7', to: '71', text: '投资' },
+          { from: '7', to: '72', text: '投资' },
+          { from: '7', to: '73', text: '投资' },
+          { from: '8', to: '81', text: '投资' },
+          { from: '8', to: '82', text: '投资' },
+          { from: '8', to: '83', text: '投资' },
+          { from: '8', to: '84', text: '投资' },
+          { from: '8', to: '85', text: '投资' },
+          { from: '9', to: '91', text: '投资' },
+          { from: '9', to: '92', text: '投资' },
+          { from: '3', to: '1', text: '高管' },
+          { from: '1', to: '5', text: '投资' }
+        ]
+      }
+      this.$refs.seeksRelationGraph.appendJsonData(__graph_json_data, (seeksRGGraph) => {
+        // 这些写上当图谱初始化完成后需要执行的代码
+      })
+    },
+    loadNextLevel3Data() {
+      this.level3DataIsloaded = true
+      var __graph_json_data = {
+        rootId: '2',
+        nodes: [
+          { id: '51', name: '节点-51', myicon: 'el-icon-sunny' },
+          { id: '52', name: '节点-52', myicon: 'el-icon-sunny' },
+          { id: '53', name: '节点-53', myicon: 'el-icon-sunny' },
+          { id: '54', name: '节点-54', myicon: 'el-icon-sunny' },
+          { id: '55', name: '节点-55', myicon: 'el-icon-sunny' }
+        ],
+        links: [
+          { from: '5', to: '51', text: '投资1' },
+          { from: '5', to: '52', text: '投资' },
+          { from: '5', to: '53', text: '投资3' },
+          { from: '5', to: '54', text: '投资4' },
+          { from: '5', to: '55', text: '投资' }
+        ]
+      }
+      this.$refs.seeksRelationGraph.appendJsonData(__graph_json_data, (seeksRGGraph) => {
+        // 这些写上当图谱初始化完成后需要执行的代码
+      })
+    },
+    onNodeClick(nodeObject, $event) {
+      console.log('onNodeClick:', nodeObject)
+    },
+    onLineClick(lineObject, $event) {
+      console.log('onLineClick:', lineObject)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>
+
+<style lang="scss" scoped>
+
+</style>

doc/demo/Demo4AdvMultiLayout.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <div style="height:calc(100vh - 50px);">
+      <RelationGraph
+        ref="seeksRelationGraph"
+        :options="graphOptions"
+        :on-node-click="onNodeClick"
+        :on-line-click="onLineClick"
+      />
+    </div>
+    <el-button type="success" class="c-show-code-button" @click="isShowCodePanel=true">查看代码</el-button>
+    <el-drawer
+      title="node option:"
+      direction="rtl"
+      size="50%"
+      custom-class="c-drawer-window"
+      :modal="false"
+      :visible.sync="isShowCodePanel"
+      :with-header="false"
+    >
+      <iframe src="/relation-graph-codes/Demo4Logo.html" width="100%" height="100%" frameborder="0" scrolling="auto" style="" />
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import RelationGraph from 'relation-graph'
+export default {
+  name: 'Demo',
+  components: { RelationGraph },
+  data() {
+    return {
+      isShowCodePanel: false,
+      graphOptions: {
+        allowSwitchLineShape: true,
+        allowSwitchJunctionPoint: true,
+        'layouts': [
+          {
+            'label': '布局1',
+            'layoutName': 'center',
+            'layoutClassName': 'seeks-layout-center',
+            useLayoutStyleOptions: true,
+            'defaultNodeWidth': '50',
+            'defaultNodeHeight': '50',
+            defaultNodeBorderWidth: 0,
+            defaultNodeColor: 'rgba(238, 178, 94, 1)',
+            defaultLineShape: 1
+          },
+          {
+            'label': '布局2',
+            'layoutName': 'tree',
+            'layoutClassName': 'seeks-layout-center',
+            useLayoutStyleOptions: true,
+            'from': 'top',
+            'defaultNodeWidth': '30',
+            'defaultNodeHeight': '100',
+            'defaultJunctionPoint': 'tb',
+            'defaultNodeShape': 1,
+            'defaultLineShape': 4,
+            'defaultNodeBorderWidth': 0,
+            'defaultLineColor': 'rgba(0, 186, 189, 1)',
+            'defaultNodeColor': 'rgba(0, 206, 209, 1)',
+            'min_per_width': 40,
+            'max_per_width': 70,
+            'min_per_height': 200
+          },
+          {
+            'label': '布局3',
+            'layoutName': 'tree',
+            'layoutClassName': 'seeks-layout-center',
+            useLayoutStyleOptions: true,
+            'from': 'left',
+            'defaultNodeWidth': '100',
+            'defaultNodeHeight': '30',
+            'defaultJunctionPoint': 'lr',
+            'defaultNodeShape': 1,
+            'defaultLineShape': 3,
+            'defaultNodeBorderWidth': 0,
+            'defaultLineColor': '#cccccc',
+            'defaultNodeColor': '#43a2f1',
+            'min_per_width': 200,
+            'max_per_width': 400,
+            'min_per_height': 40,
+            'max_per_height': 70
+          }
+        ],
+        defaultJunctionPoint: 'border'
+
+        // 这里可以参考"Graph 图谱"中的参数进行设置
+      }
+    }
+  },
+  mounted() {
+    this.$notify({
+      title: '提示：',
+      message: '点击右侧工具栏中的"布局"按钮来切换',
+      type: 'success',
+      duration: 10000
+    })
+    this.showSeeksGraph()
+  },
+  methods: {
+    showSeeksGraph(query) {
+      var __graph_json_data = { 'rootId': 'a', 'nodes': [{ 'id': 'a', 'text': 'a' }, { 'id': 'b', 'text': 'b' }, { 'id': 'b1', 'text': 'b1' }, { 'id': 'b1-1', 'text': 'b1-1' }, { 'id': 'b1-2', 'text': 'b1-2' }, { 'id': 'b1-3', 'text': 'b1-3' }, { 'id': 'b1-4', 'text': 'b1-4' }, { 'id': 'b1-5', 'text': 'b1-5' }, { 'id': 'b1-6', 'text': 'b1-6' }, { 'id': 'b2', 'text': 'b2' }, { 'id': 'b2-1', 'text': 'b2-1' }, { 'id': 'b2-2', 'text': 'b2-2' }, { 'id': 'b2-3', 'text': 'b2-3' }, { 'id': 'b2-4', 'text': 'b2-4' }, { 'id': 'b3', 'text': 'b3' }, { 'id': 'b3-1', 'text': 'b3-1' }, { 'id': 'b3-2', 'text': 'b3-2' }, { 'id': 'b3-3', 'text': 'b3-3' }, { 'id': 'b3-4', 'text': 'b3-4' }, { 'id': 'b3-5', 'text': 'b3-5' }, { 'id': 'b3-6', 'text': 'b3-6' }, { 'id': 'b3-7', 'text': 'b3-7' }, { 'id': 'b4', 'text': 'b4' }, { 'id': 'b4-1', 'text': 'b4-1' }, { 'id': 'b4-2', 'text': 'b4-2' }, { 'id': 'b4-3', 'text': 'b4-3' }, { 'id': 'b4-4', 'text': 'b4-4' }, { 'id': 'b4-5', 'text': 'b4-5' }, { 'id': 'b4-6', 'text': 'b4-6' }, { 'id': 'b4-7', 'text': 'b4-7' }, { 'id': 'b4-8', 'text': 'b4-8' }, { 'id': 'b4-9', 'text': 'b4-9' }, { 'id': 'b5', 'text': 'b5' }, { 'id': 'b5-1', 'text': 'b5-1' }, { 'id': 'b5-2', 'text': 'b5-2' }, { 'id': 'b5-3', 'text': 'b5-3' }, { 'id': 'b5-4', 'text': 'b5-4' }, { 'id': 'b6', 'text': 'b6' }, { 'id': 'b6-1', 'text': 'b6-1' }, { 'id': 'b6-2', 'text': 'b6-2' }, { 'id': 'b6-3', 'text': 'b6-3' }, { 'id': 'b6-4', 'text': 'b6-4' }, { 'id': 'b6-5', 'text': 'b6-5' }, { 'id': 'c', 'text': 'c' }, { 'id': 'c1', 'text': 'c1' }, { 'id': 'c1-1', 'text': 'c1-1' }, { 'id': 'c1-2', 'text': 'c1-2' }, { 'id': 'c1-3', 'text': 'c1-3' }, { 'id': 'c1-4', 'text': 'c1-4' }, { 'id': 'c1-5', 'text': 'c1-5' }, { 'id': 'c1-6', 'text': 'c1-6' }, { 'id': 'c1-7', 'text': 'c1-7' }, { 'id': 'c2', 'text': 'c2' }, { 'id': 'c2-1', 'text': 'c2-1' }, { 'id': 'c2-2', 'text': 'c2-2' }, { 'id': 'c3', 'text': 'c3' }, { 'id': 'c3-1', 'text': 'c3-1' }, { 'id': 'c3-2', 'text': 'c3-2' }, { 'id': 'c3-3', 'text': 'c3-3' }, { 'id': 'd', 'text': 'd' }, { 'id': 'd1', 'text': 'd1' }, { 'id': 'd1-1', 'text': 'd1-1' }, { 'id': 'd1-2', 'text': 'd1-2' }, { 'id': 'd1-3', 'text': 'd1-3' }, { 'id': 'd1-4', 'text': 'd1-4' }, { 'id': 'd1-5', 'text': 'd1-5' }, { 'id': 'd1-6', 'text': 'd1-6' }, { 'id': 'd1-7', 'text': 'd1-7' }, { 'id': 'd1-8', 'text': 'd1-8' }, { 'id': 'd2', 'text': 'd2' }, { 'id': 'd2-1', 'text': 'd2-1' }, { 'id': 'd2-2', 'text': 'd2-2' }, { 'id': 'd3', 'text': 'd3' }, { 'id': 'd3-1', 'text': 'd3-1' }, { 'id': 'd3-2', 'text': 'd3-2' }, { 'id': 'd3-3', 'text': 'd3-3' }, { 'id': 'd3-4', 'text': 'd3-4' }, { 'id': 'd3-5', 'text': 'd3-5' }, { 'id': 'd4', 'text': 'd4' }, { 'id': 'd4-1', 'text': 'd4-1' }, { 'id': 'd4-2', 'text': 'd4-2' }, { 'id': 'd4-3', 'text': 'd4-3' }, { 'id': 'd4-4', 'text': 'd4-4' }, { 'id': 'd4-5', 'text': 'd4-5' }, { 'id': 'd4-6', 'text': 'd4-6' }, { 'id': 'e', 'text': 'e' }, { 'id': 'e1', 'text': 'e1' }, { 'id': 'e1-1', 'text': 'e1-1' }, { 'id': 'e1-2', 'text': 'e1-2' }, { 'id': 'e1-3', 'text': 'e1-3' }, { 'id': 'e1-4', 'text': 'e1-4' }, { 'id': 'e1-5', 'text': 'e1-5' }, { 'id': 'e1-6', 'text': 'e1-6' }, { 'id': 'e2', 'text': 'e2' }, { 'id': 'e2-1', 'text': 'e2-1' }, { 'id': 'e2-2', 'text': 'e2-2' }, { 'id': 'e2-3', 'text': 'e2-3' }, { 'id': 'e2-4', 'text': 'e2-4' }, { 'id': 'e2-5', 'text': 'e2-5' }, { 'id': 'e2-6', 'text': 'e2-6' }, { 'id': 'e2-7', 'text': 'e2-7' }, { 'id': 'e2-8', 'text': 'e2-8' }, { 'id': 'e2-9', 'text': 'e2-9' }], 'links': [{ 'from': 'a', 'to': 'b' }, { 'from': 'b', 'to': 'b1' }, { 'from': 'b1', 'to': 'b1-1' }, { 'from': 'b1', 'to': 'b1-2' }, { 'from': 'b1', 'to': 'b1-3' }, { 'from': 'b1', 'to': 'b1-4' }, { 'from': 'b1', 'to': 'b1-5' }, { 'from': 'b1', 'to': 'b1-6' }, { 'from': 'b', 'to': 'b2' }, { 'from': 'b2', 'to': 'b2-1' }, { 'from': 'b2', 'to': 'b2-2' }, { 'from': 'b2', 'to': 'b2-3' }, { 'from': 'b2', 'to': 'b2-4' }, { 'from': 'b', 'to': 'b3' }, { 'from': 'b3', 'to': 'b3-1' }, { 'from': 'b3', 'to': 'b3-2' }, { 'from': 'b3', 'to': 'b3-3' }, { 'from': 'b3', 'to': 'b3-4' }, { 'from': 'b3', 'to': 'b3-5' }, { 'from': 'b3', 'to': 'b3-6' }, { 'from': 'b3', 'to': 'b3-7' }, { 'from': 'b', 'to': 'b4' }, { 'from': 'b4', 'to': 'b4-1' }, { 'from': 'b4', 'to': 'b4-2' }, { 'from': 'b4', 'to': 'b4-3' }, { 'from': 'b4', 'to': 'b4-4' }, { 'from': 'b4', 'to': 'b4-5' }, { 'from': 'b4', 'to': 'b4-6' }, { 'from': 'b4', 'to': 'b4-7' }, { 'from': 'b4', 'to': 'b4-8' }, { 'from': 'b4', 'to': 'b4-9' }, { 'from': 'b', 'to': 'b5' }, { 'from': 'b5', 'to': 'b5-1' }, { 'from': 'b5', 'to': 'b5-2' }, { 'from': 'b5', 'to': 'b5-3' }, { 'from': 'b5', 'to': 'b5-4' }, { 'from': 'b', 'to': 'b6' }, { 'from': 'b6', 'to': 'b6-1' }, { 'from': 'b6', 'to': 'b6-2' }, { 'from': 'b6', 'to': 'b6-3' }, { 'from': 'b6', 'to': 'b6-4' }, { 'from': 'b6', 'to': 'b6-5' }, { 'from': 'a', 'to': 'c' }, { 'from': 'c', 'to': 'c1' }, { 'from': 'c1', 'to': 'c1-1' }, { 'from': 'c1', 'to': 'c1-2' }, { 'from': 'c1', 'to': 'c1-3' }, { 'from': 'c1', 'to': 'c1-4' }, { 'from': 'c1', 'to': 'c1-5' }, { 'from': 'c1', 'to': 'c1-6' }, { 'from': 'c1', 'to': 'c1-7' }, { 'from': 'c', 'to': 'c2' }, { 'from': 'c2', 'to': 'c2-1' }, { 'from': 'c2', 'to': 'c2-2' }, { 'from': 'c', 'to': 'c3' }, { 'from': 'c3', 'to': 'c3-1' }, { 'from': 'c3', 'to': 'c3-2' }, { 'from': 'c3', 'to': 'c3-3' }, { 'from': 'a', 'to': 'd' }, { 'from': 'd', 'to': 'd1' }, { 'from': 'd1', 'to': 'd1-1' }, { 'from': 'd1', 'to': 'd1-2' }, { 'from': 'd1', 'to': 'd1-3' }, { 'from': 'd1', 'to': 'd1-4' }, { 'from': 'd1', 'to': 'd1-5' }, { 'from': 'd1', 'to': 'd1-6' }, { 'from': 'd1', 'to': 'd1-7' }, { 'from': 'd1', 'to': 'd1-8' }, { 'from': 'd', 'to': 'd2' }, { 'from': 'd2', 'to': 'd2-1' }, { 'from': 'd2', 'to': 'd2-2' }, { 'from': 'd', 'to': 'd3' }, { 'from': 'd3', 'to': 'd3-1' }, { 'from': 'd3', 'to': 'd3-2' }, { 'from': 'd3', 'to': 'd3-3' }, { 'from': 'd3', 'to': 'd3-4' }, { 'from': 'd3', 'to': 'd3-5' }, { 'from': 'd', 'to': 'd4' }, { 'from': 'd4', 'to': 'd4-1' }, { 'from': 'd4', 'to': 'd4-2' }, { 'from': 'd4', 'to': 'd4-3' }, { 'from': 'd4', 'to': 'd4-4' }, { 'from': 'd4', 'to': 'd4-5' }, { 'from': 'd4', 'to': 'd4-6' }, { 'from': 'a', 'to': 'e' }, { 'from': 'e', 'to': 'e1' }, { 'from': 'e1', 'to': 'e1-1' }, { 'from': 'e1', 'to': 'e1-2' }, { 'from': 'e1', 'to': 'e1-3' }, { 'from': 'e1', 'to': 'e1-4' }, { 'from': 'e1', 'to': 'e1-5' }, { 'from': 'e1', 'to': 'e1-6' }, { 'from': 'e', 'to': 'e2' }, { 'from': 'e2', 'to': 'e2-1' }, { 'from': 'e2', 'to': 'e2-2' }, { 'from': 'e2', 'to': 'e2-3' }, { 'from': 'e2', 'to': 'e2-4' }, { 'from': 'e2', 'to': 'e2-5' }, { 'from': 'e2', 'to': 'e2-6' }, { 'from': 'e2', 'to': 'e2-7' }, { 'from': 'e2', 'to': 'e2-8' }, { 'from': 'e2', 'to': 'e2-9' }] }
+      this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
+        // 这些写上当图谱初始化完成后需要执行的代码
+      })
+    },
+    onNodeClick(nodeObject, $event) {
+      console.log('onNodeClick:', nodeObject)
+    },
+    onLineClick(lineObject, $event) {
+      console.log('onLineClick:', lineObject)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>
+
+<style lang="scss" scoped>
+
+</style>