使用echarts做关系图

待我称王封你为后i 2023-06-13 09:38 38阅读 0赞

先看效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70][]

结构：

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);
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191115175858569.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA==,size_16,color_FFFFFF,t_70