vue+relation-graph绘制关系图实用组件

先在终端执行命令

vue create relationgraph

创建一个vue2的项目
vue+relation-graph绘制关系图实用组件_第1张图片
然后在编辑器中打开新创建的项目
在终端中执行命令

npm install relation-graph --save

引入依赖
vue+relation-graph绘制关系图实用组件_第2张图片
这样 我们relation-graph就进来了

然后 我们在需要使用的组件中编写代码如下

<template>
  <div>
    <div style="width: calc(100% - 10px);height:100vh;">
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" />
    div>
  div>
template>

<script>
import SeeksRelationGraph from 'relation-graph';
export default {
  name: 'SeeksRelationGraphDemo',
  components: { SeeksRelationGraph },
  data() {
    return {
      graphOptions: {
        // debug: true,
        // 禁用拖拽
        disableDragNode: true,
        // backgrounImage: 'http://ai-mark.cn/images/ai-mark-desc.png',
        backgrounImageNoRepeat: true,
        layouts: [
          {
            label: '多源化',
            layoutName: 'tree',
            layoutClassName: 'seeks-layout-center',
            defaultJunctionPoint: 'border',
            defaultNodeShape: 0,
            defaultLineShape: 1,
            from: 'left',
            // 通过这4个属性来调整 tree-层级距离&节点距离
            min_per_width: '200',
            max_per_width: '500',
            // min_per_height: '40',
            // max_per_height: '60',
            // 如果此选项有值,则优先级高于上面那4个选项
            levelDistance: '',
          },
        ],
        // 箭头样式
        defaultLineMarker: {
          markerWidth: '0',
          markerHeight: '0',
          refX: '0',
          refY: '0',
        },
        defaultExpandHolderPosition: 'right',
        defaultNodeShape: 1,
        defaultNodeWidth: '100', // 节点宽度
        defaultLineShape: 4, //线条样式
        defaultJunctionPoint: 'lr',
        defaultNodeBorderWidth: 0,
        defaultLineColor: 'rgba(0, 186, 189, 1)',
        defaultNodeColor: 'rgba(0, 206, 209, 1)',
      }
    };
  },
  mounted() {
    this.setGraphData();
  },
  methods: {
    setGraphData() {
      var __graph_json_data = {
        rootId: 'N1',
        nodes: [
          { id: 'N1', text: '测试方案', color: '#2E4E8F' },
          { id: 'N15', text: '高级规划', color: '#4ea2f0' },
          {
            id: 'N16',
            color: '#4ea2f0',
            html: `
高级测试管理方案
映射工具
`
, }, { id: 'N17', text: '微化文案管理', color: '#4ea2f0', }, { id: 'N18', text: '初级测试文案', color: '#4ea2f0' } ], links: [ { from: 'N1', to: 'N15' }, { from: 'N15', to: 'N16' }, { from: 'N15', to: 'N17' }, { from: 'N15', to: 'N18' }, { from: 'N15', to: 'N19' }, ], }; this.$refs.seeksRelationGraph.setJsonData( __graph_json_data, (seeksRGGraph) => { console.log(seeksRGGraph); } ); }, }, };
script> <style> style>

这里 首先 大家要缕清关系 我们每个节点都带有id 例如N1 N15
然后 我们设置根节点的id是N1
links梳理了元素之前的关系
N15 插入在N1 下 剩下的 N16 N17 N18 N19则插入在N15下
然后 我们可以通过
{ id: ‘唯一标识’, text: ‘内容文本’, color: ‘颜色代码’ }
也可以通过
{ id: ‘唯一标识’, html: ‘页面结构字符串’, color: ‘颜色代码’ }
来完成
最后 我们运行出来的效果是这样的
vue+relation-graph绘制关系图实用组件_第3张图片
右边的操作了也都是可以用的 我们可以进行放大 缩小 甚至下载到本地
vue+relation-graph绘制关系图实用组件_第4张图片

你可能感兴趣的:(vue.js,前端,javascript)