使用echarts做关系图

先看效果图：

结构：

 <div ref="table12" id="table12" style="width: 100%;height:7.5rem;"></div>

 script中的方法：

   init_table13(){
      // 连线数据
      var links =   
 [{id: "0", name: null, source: "1", target: "0", lineStyle: {color:'#BDA29A'}}
,{id: "1", name: null, source: "2", target: "0", lineStyle: {color:'#BDA29A'}}  
,{id: "2", name: null, source: "3", target: "0", lineStyle: {color:'#BDA29A'}}  
,{id: "3", name: null, source: "4", target: "0", lineStyle: {color:'#BDA29A'}}  
,{id: "4", name: null, source: "5", target: "0", lineStyle: {color:'#BDA29A'}}  
,{id: "5", name: null, source: "6", target: "0", lineStyle: {color:'#BDA29A'}}  
,{id: "6", name: null, source: "7", target: "0", lineStyle: {color:'#BDA29A'}}  
,{id: "7", name: null, source: "16", target: "3", lineStyle: {color:'#619FA7'}}  
,{id: "8", name: null, source: "17", target: "3", lineStyle: {color:'#619FA7'}}  
,{id: "9", name: null, source: "18", target: "3", lineStyle: {color:'#619FA7'}}  
,{id: "10", name: null, source: "19", target: "3", lineStyle: {color:'#619FA7'}}  
,{id: "11", name: null, source: "20", target: "4", lineStyle: {color:'#D38164'}}  
,{id: "12", name: null, source: "21", target: "5", lineStyle: {color:'#90C5AC'}}  
,{id: "13", name: null, source: "22", target: "6", lineStyle: {color:'#739E82'}}  
,{id: "14", name: null, source: "23", target: "7", lineStyle: {color:'#C58221'}}  
,{id: "15", name: null, source: "8", target: "1", lineStyle: {color:'#C23531'}}  
,{id: "16", name: null, source: "9", target: "8", lineStyle: {color:'#C23531'}}  
,{id: "17", name: null, source: "10", target: "8", lineStyle: {color:'#C23531'}}  
,{id: "18", name: null, source: "11", target: "8", lineStyle: {color:'#C23531'}}  
,{id: "19", name: null, source: "12", target: "8", lineStyle: {color:'#C23531'}}  
,{id: "20", name: null, source: "13", target: "8", lineStyle: {color:'#C23531'}}  
,{id: "21", name: null, source: "14", target: "2", lineStyle: {color:'#2F4554'}}  
,{id: "22", name: null, source: "15", target: "14", lineStyle: {color:'#2F4554'}}  
 ]
// 节点
var nodes = 
[{id: "0",category:7, name: "2020年", label: {show:true,position:'inside'}, itemStyle: null, symbolSize: 100, x: -200,y: -100 }
,{id: "1",category:0, name: "银座", itemStyle: null, symbolSize: 50, x: -300, y: -300}
,{id: "2",category:1, name: "家家乐", itemStyle: null, symbolSize: 50, x: -300, y: 0}
,{id: "3",category:2, name: "信誉楼", itemStyle: null, symbolSize: 25, x: 100, y: -300}
,{id: "4",category:3, name: "新百", itemStyle: null, symbolSize: 25, x: 100, y: -200}
,{id: "5",category:4, name: "农家乐", itemStyle: null, symbolSize: 25, x: 100, y: -100}
,{id: "6",category:5, name: "新年华", itemStyle: null, symbolSize: 25, x: 100, y: 0}
,{id: "7",category:6, name: "新百伦", itemStyle: null, symbolSize: 25, x: 100, y: 100}
,{id: "8",category:0, name: "张三", itemStyle: null, symbolSize: 45, x: -500, y: -300}
,{id: "9",category:0, name: "李四", itemStyle: null, symbolSize: 20, x: -600, y: -350}
,{id: "10",category:0, name: "王五", itemStyle: null, symbolSize: 20, x: -600, y: -300}
,{id: "11",category:0, name: "李留", itemStyle: null, symbolSize: 24, x: -600, y: -250}
,{id: "12",category:0, name: "陈琦", itemStyle: null, symbolSize: 35, x: -550, y: -200}
,{id: "13",category:0, name: "周八", itemStyle: null, symbolSize: 30, x: -450, y: -200}
,{id: "14",category:1, name: "洋酒", itemStyle: null, symbolSize: 45, x: -400, y: 0}
,{id: "15",category:1, name: "十八号", itemStyle: null, symbolSize: 35, x: -500, y: 0}
,{id: "16",category:2, name: "黄十三", itemStyle: null, symbolSize: 15, x: 100, y: -400}
,{id: "17",category:2, name: "蓝十四", itemStyle: null, symbolSize: 15, x: 200, y: -380}
,{id: "18",category:2, name: "曾失误", itemStyle: null, symbolSize: 15, x: 250, y: -330}
,{id: "19",category:2, name: "王时期", itemStyle: null, symbolSize: 15, x: 250, y: -250}
,{id: "20",category:3, name: "梅而是", itemStyle: null, symbolSize: 15, x: 250, y: -200}
,{id: "21",category:4, name: "黄二十一", itemStyle: null, symbolSize: 15, x: 250, y: -100}
,{id: "22",category:5, name: "杨二十二", itemStyle: null, symbolSize: 15, x: 250, y: 0}
,{id: "23",category:6, name: "吕二十三", itemStyle: null, symbolSize: 30, x: 250, y: 100}
]
let categories = [
  {name:'银座'},
  {name:'家家乐'},
  {name:'信誉楼'},
  {name:'新百'},
  {name:'农家乐'},
  {name:'新年华'},
  {name:'新百伦'},
  {name:'2020年'},
]
 let myChart = this.$echarts.init(document.getElementById("table12"));
 let option = {
        title: {
            text: 'Les Miserables',
            subtext: 'Default layout',
            top: 'bottom',
            left: 'right'
        },
        tooltip: {},
        legend: [{
            // selectedMode: 'single',
            data: categories.map(function (a) {
                return a.name;
            })
        }],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series : [
            {
                name: 'Les Miserables',
                type: 'graph',
                layout: 'none',
                data: nodes,
                links: links,
                categories: categories,
                roam: true,
                focusNodeAdjacency: true,
                itemStyle: {
                    normal: {
                        borderColor: '#fff',
                        borderWidth: 1,
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.3)'
                    }
                },
                label: {
                  show:true,
                    position: 'right',
                    formatter: '{b}'
                },
                lineStyle: {
                    color: 'source',
                    curveness: 0.3
                },
                emphasis: {
                    lineStyle: {
                        width: 10
                    }
                }
            }
        ]
    };

    myChart.setOption(option);
    },