VUE + Echart 5.3.2 graph关系图代码

 效果

整个页面代码（附注释），里面getData方法是对接的后台数据，可忽略，只要节点和连线配对了就能实现效果

Echart关系图的配置项官方文档https://echarts.apache.org/zh/option.html#series-graph

<template>
  <div class="echart" id="chart1" ref="chart1" :style="{width: '100%', height: '430px', background_color: '#fff'}"></div>
</template>

<script>
import { hideLoading } from '@/utils/showLoading'

const echarts = require('echarts')

export default {
  name: 'RelationChart',
  data() {
    return {
      // 连关系线
      links: [],
      //节点
      nodes: [],
      // 分类
      categories: [
        {
          'name': '当前公司',
          'keyword': {},
          'base': 'HTMLElement',
          'itemStyle': { color: 'green' }
        },
        {
          'name': '关联公司',
          'keyword': {},
          'base': 'WebGLRenderingContext',
          'itemStyle': { color: 'red' }
        },
        {
          'name': '股东',
          'keyword': {},
          'base': 'SVGElement',
          'itemStyle': { color: 'blue' }
        }
      ]
    }
  },
  methods: {
    // 获取后台数据
    getData(id) {
      let that = this
      const param = {
        'id': id
      }
      this.$http.post('affiliatedEnterprises/affiliate_relation_chart', param).then((response) => {
        if (response.error_code === 0) {
          // 设置节点
          let nodeId = 0
          // 第一节点肯定是当前公司 默认节点id 0
          this.nodes.push({ id: 0, name: response.data.company.companyName, symbolSize: 70, category: 0 })
          nodeId++
          // 关联企业节点 并连接关系图
          if (response.data.companyShareholders2.length > 0) {
            // 当前企业投资的企业
            response.data.companyShareholders2.forEach(function(element) {
              that.nodes.push({ id: nodeId, companyId: element.shareholderId, name: element.shareholderName, symbolSize: 70, category: 1 })
              that.links.push({ source: 0, target: nodeId, relation: { name: '投资', id: '1' } })
              nodeId++
            })
          }
          if (response.data.companyShareholders3.length > 0) {
            // 当前企业被投资的企业
            response.data.companyShareholders3.forEach(function(element) {
              that.nodes.push({ id: nodeId, companyId: element.companyId, name: element.companyName, symbolSize: 70, category: 1 })
              that.links.push({ source: nodeId, target: 0, relation: { name: '投资', id: '1' } })
              nodeId++
            })
          }
          // 关联股东节点
          // 当前企业的股东
          if (response.data.companyShareholders1.length > 0) {
            // 当前企业投资的企业
            response.data.companyShareholders1.forEach(function(element) {
              that.nodes.push({ id: nodeId, name: element.shareholderName, symbolSize: 70, category: 2 })
              that.links.push({ source: 0, target: nodeId, relation: { name: '股东', id: '1' } })
              nodeId++
            })
          }
          // 关联企业的股东节点
          if (response.data.companyShareholders4.length > 0) {
            // 当前企业投资的企业
            response.data.companyShareholders4.forEach(function(element) {
              for(let i = 0; i < that.nodes.length; i++){
                if(that.nodes[i].companyId != undefined && that.nodes[i].companyId == element.companyId){
                  that.nodes.push({ id: nodeId, name: element.shareholderName, symbolSize: 70, category: 2 })
                  that.links.push({ source: that.nodes[i].id, target: nodeId, relation: { name: '股东', id: '1' } })
                  nodeId++
                }
              }
            })
          }
          // 初始化图表
          this.initChart(document.getElementById('chart1'))
        }
      })
    },
    initChart(domName) {
      let option = {
        toolbox: { // 工具栏
          feature: {
            myFull: { // 全屏
              show: true,
              title: '全屏',
              icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
              onclick: (e) => {
                // 全屏查看
                if (domName.requestFullScreen) { // HTML W3C 提议
                  domName.requestFullScreen()
                } else if (domName.msRequestFullscreen) { // IE11
                  domName.msRequestFullScreen()
                } else if (domName.webkitRequestFullScreen) { // Webkit
                  domName.webkitRequestFullScreen()
                } else if (domName.mozRequestFullScreen) { // Firefox
                  domName.mozRequestFullScreen()
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen()
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen()
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen()
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen()
                }
              }
            }
          }
        },
        legend: { // 上面筛选分类的块，需设置分类
          data: ['当前公司', '关联公司', '股东'],
          itemGap: 26,
          textStyle: {
            padding: [0, 12]
          },
          backgroundColor: '#f5f5f5'
        },
        layout: 'force', // 对应下面的force
        animation: false, // 不要加载动画
        series: [
          {
            type: 'graph',
            layout: 'force',
            data: this.nodes, // 节点
            links: this.links, // 连线
            categories: this.categories, // 分类
            roam: true,
            draggable: true,
            label: {
              show: true,
              position: 'bottom',
              distance: 5,
              fontSize: 18,
              align: 'center'
            },
            autoCurveness: 0.01, //多条边的时候，自动计算曲率
            force: { // 线长度啥的设置
              edgeLength: 300,
              repulsion: 50,
              gravity: 0.01
            },
            edgeLabel: { //边的设置
              show: true,
              position: 'middle',
              fontSize: 12,
              formatter: (params) => {
                return params.data.relation.name
              }
            },
            edgeSymbol: ['circle', 'arrow'] //边两边的类型
          }
        ]
      }

      const getchart = echarts.init(this.$refs.chart1)
      getchart.setOption(option)
      //随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        getchart.resize()
      })
    }
  }
}
</script>

<style scoped>
:-webkit-full-screen {
  /* properties */
  background-color: white;
}

:-moz-full-screen {
  /* properties */
  background-color: white;
}

:-ms-fullscreen {
  /* properties */
  background-color: white;
}

:full-screen { /*pre-spec */
  /* properties */
  background-color: white;
}

:fullscreen { /* spec */
  /* properties */
  background-color: white;
}

</style>

如果不想看后台，想直接看静态页面效果，可以把data里面的nodes和links给改了

       // 连关系线
      links: [
        {
          source: 1,
          target: 0,
          relation: {
            name: '投资',
            id: '1'
          }
        },
        {
          source: 2,
          target: 0,
          relation: {
            name: '投资',
            id: '1'
          }
        },
        {
          source: 2,
          target: 1,
          relation: {
            name: '投资',
            id: '1'
          }
        },
        {
          source: 1,
          target: 2,
          relation: {
            name: '投资',
            id: '1'
          }
        },
        {
          source: 2,
          target: 3,
          relation: {
            name: '股东',
            id: '1'
          }
        }
      ],
      //节点
      nodes: [
        {
          id: 0,
          name: '甲公司',
          symbolSize: 70,
          value: 4,
          category: 0
        },
        {
          id: 1,
          name: '乙公司',
          symbolSize: 50,
          value: 8,
          category: 1
        },
        {
          id: 2,
          name: '丙公司',
          symbolSize: 50,
          value: 4,
          category: 1
        },
        {
          id: 3,
          name: '侦缉队长贾贵',
          symbolSize: 30,
          value: 4,
          category: 2
        }
      ],
      // 分类
      categories: [
        {
          'name': '当前公司',
          'keyword': {},
          'base': 'HTMLElement',
          'itemStyle': { color: 'green' }
        },
        {
          'name': '关联公司',
          'keyword': {},
          'base': 'WebGLRenderingContext',
          'itemStyle': { color: 'red' }
        },
        {
          'name': '股东',
          'keyword': {},
          'base': 'SVGElement',
          'itemStyle': { color: 'blue' }
        }
      ]