echarts 关系图 力引导布局

<div id="myEcharts"></div>

mouted(){
this.echartsData = [
            {
                category: "本人",
                id: 204418,
                itemStyle: {
                    color: "#ff4343"
                },
                color: "#ff4343",
                name: "王成友",
                value: 60,
            }, {
                category: "配偶",
                id: 204419,
                itemStyle: {
                    color: "#ff4343"
                },
                name: "王业琴",
                value: 30,
            }
        ]
this.link = [
            {
                label: {
                    borderColor: "#45dbf7",
                    borderWidth: 2,
                    color: "#45dbf7",
                    formatter: "王业琴",
                    shadowBlur: 20,
                    shadowColor: "#45dbf7",
                    show: true,
                },
                source: "本人",
                target: "王业琴",
            },
            {
                label: {
                    borderColor: "#45dbf7",
                    borderWidth: 2,
                    color: "#45dbf7",
                    formatter: "王家乐",
                    shadowBlur: 20,
                    shadowColor: "#45dbf7",
                    show: true,
                },
                source: "本人",
                target: "王家乐",
            }
        ]
setTimeout(() => {
                        this.initEchart();
                    }, 200);
}
methods:{
 initEchart() {
            document.getElementById("myEcharts").removeAttribute("_echarts_instance_"); // 移除容器上的 _echarts_instance_ 属性  重新渲染数据
            let myChart = this.$echarts.init(document.getElementById("myEcharts"));
            let categories = [
                { name: '本人' },
                { name: '配偶' },
                { name: '子女' },
                { name: '父母' },
                { name: '岳父母' },
                { name: '女婿' },
                { name: '儿媳' },
                { name: '孙子' },
                { name: '孙女' },
                { name: '亲戚' },
                { name: '租赁' },
            ]
            let option = {
                // title: {
                //     text: '人际关系网络图',//标题
                //     subtext: '人物关系：乔布斯',//标题副标题
                //     top: 'top',//相对在y轴上的位置
                //     left: 'center'//相对在x轴上的位置
                // },
                tooltip: {//提示框，鼠标悬浮交互时的信息提示
                    trigger: 'item',//数据触发类型
                    formatter: function (params) {//触发之后返回的参数，这个函数是关键
                        // if (params.data.category != undefined) {//如果触发节点
                        //     return '人物:' + params.data.name;//返回标签
                        // } else {//如果触发边
                        return '关系:' + params.data.category;
                        // }
                    },
                },
                //工具箱，每个图表最多仅有一个工具箱
                // toolbox: {
                //     show: true,
                //     feature: {//启用功能
                //         //dataView数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
                //         dataView: { show: true, readOnly: true },
                //         restore: { show: true },//restore，还原，复位原始图表
                //         saveAsImage: { show: true }//saveAsImage，保存图片
                //     }
                // },
                //全局颜色，图例、节点、边的颜色都是从这里取，按照之前划分的种类依序选取
                // color: ['rgb(194,53,49)', 'rgb(178,144,137)', 'rgb(97,160,168)'],
                // //图例，每个图表最多仅有一个图例
                // legend: [{
                //     // 纵向
                //     orient: 'vertical',
                //     // 位置
                //     left: 'left',
                //     // 图例内容，由上面的分类集合决定
                //     data: [{ name: '本人' }, { name: "亲属" }].map(function (a) {
                //         return a.name;
                //     }),
                //     textStyle: {
                //         color: 'rgba(94,156,195,1)',
                //         borderWidth: '1',
                //         fontSize: '10'
                //     },
                //     backgroundColor: 'rgba(42,79,108,0.32)',
                //     borderColor: 'rgba(42,79,108,1)',
                //     selectorButtonGap: '2',
                // }],
                //sereis的数据: 用于设置图表数据之用
                series: [
                    {
                        name: '人际关系网络图',//系列名称
                        type: 'graph',//图表类型
                        layout: 'force',//echarts3的变化，force是力向图，circular是和弦图
                        draggable: false,//指示节点是否可以拖动
                        data: this.echartsData,//节点数据
                        links: this.link,//边、联系数据
                        categories: categories,//节点种类
                        focusNodeAdjacency: true,//当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
                        roam: false,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                        label: {//图形上的文本标签，可用于说明图形的一些数据信息
                            normal: {
                                show: true,//显示
                                position: 'top',//相对于节点标签的位置
                                //回调函数，你期望节点标签上显示什么
                                formatter: function (params) {
                                    return params.data.name + ' ' + ` ( ${params.data.category} )`;
                                },
                            }
                        },
                        // 根据value放缩节点
                        symbolSize: (value, params) => {
                            return value;
                        },
                        //节点的style
                        itemStyle: {
                            normal: {
                                opacity: 1,//设置透明度为0.8，为0时不绘制
                            },
                        },
                        // 关系边的公用线条样式
                        lineStyle: {
                            normal: {
                                show: true,
                                color: 'target',//决定边的颜色是与起点相同还是与终点相同
                                curveness: 0.3//边的曲度，支持从 0 到 1 的值，值越大曲度越大。
                            }
                        },
                        force: {
                            edgeLength: 200,//线的长度，这个距离也会受 repulsion，支持设置成数组表达边长的范围
                            repulsion: 300//节点之间的斥力因子。值越大则斥力越大
                        }
                    }
                ]
            };
            myChart.setOption(option, true);
            myChart.on('click', (e) => {
                this.memberId = e.data.id;
                this.getMemberDataById(e.data.id)
            })

        },
}