VUE + Echart 5.3.2 graph关系图代码

 效果

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

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

如果不想看后台，想直接看静态页面效果，可以把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' }
        }
      ]