关系图设置echarts graph配置项内容和展示

      var listData = [
    {
        name: '根节点1',
        value: 0,
        draggable: false,
        fixed: true,
        x: 100, //myChart.getWidth() - 100
        y: myChart.getHeight() / 2,
        list: [
            {
                name: '节点1',
                value: 1,
                list: [
                    { name: '节点1-1-1', value: '1-1-1' },
                    { name: '节点1-1-2', value: '1-1-2' },
                    { name: '节点1-1-3', value: '1-1-3' },
                    { name: '节点1-1-4', value: '1-1-4' },
                    { name: '节点1-1-5', value: '1-1-5' },
                ],
            },
            {
                name: '节点2',
                value: 2,
                list: [
                    { name: '节点1-2-1', value: '1-2-1' },
                    { name: '节点1-2-2', value: '1-2-2' },
                    { name: '节点1-2-3', value: '1-2-3' },
                    { name: '节点1-2-4', value: '1-2-4' },
                    { name: '节点1-2-5', value: '1-2-5' },
                ],
            },
            {
                name: '节点3',
                value: 3,
                list: [
                    { name: '节点1-3-1', value: '1-3-1' },
                    { name: '节点1-3-2', value: '1-3-2' },
                    { name: '节点1-3-3', value: '1-3-3' },
                    { name: '节点1-3-4', value: '1-3-4' },
                    {
                        name: '节点1-3-51111',
                        value: '1-3-5111',
                        list: [
                            { name: '节点1-3-111', value: '1-3-1' },
                            { name: '节点1-3-2111', value: '1-3-2' },
                            { name: '节点1-3-311', value: '1-3-3' },
                            { name: '节点1-3-4111', value: '1-3-4' },
                            { name: '节点1-3-511', value: '1-3-5' },
                        ]
                    },
                ],
            },
        ],
    },
];
var listSon = listData[0].list; //除一级节点外
var legend = []; //二级节点列表 [val]
var categories = []; //二级节点列表 {name:val}
var list = [];
var links = []; // source: '源节点名称', target: '目标节点名称'
listSon.forEach((item) => {
    legend.push(item.name);
    categories.push({ name: item.name });
});

handleList(JSON.parse(JSON.stringify(listData)), 0);
handleLinks(JSON.parse(JSON.stringify(listData)), 0);

//  计算list
function handleList(arr, idx, color, category) {
    arr.forEach((item, index) => {
        if (item.name === null) {
            return false;
        }
        // 设置节点大小
        let symbolSize = 10;
        // 每个节点所对应的文本标签的样式。
        let label = null;
        if (idx === 0) {
            //根节点
            symbolSize = 130;
            label = {
                position: 'inside',
                rotate: 0,
                fontSize: 22,
                fontWeight: 'bold',
                color: '#FFFFFF',
            };
        } else if (idx === 1) {
            //一级节点
            symbolSize = 60;
            label = {
                position: 'right',
                rotate: 0,
                fontSize: 15,
                distance: 0,
                fontWeight: 'bold',
                color: '#F4BE18',
            };
        } else {
            symbolSize = 20;
            label = {
                fontSize: 12,
                color: '#D0C7AD',
            };
        }

        //浮窗 前面圆颜色设置
        if (idx === 0) {
            //根节点
            bgcolor = 'blue';
        } else {
            //一级节点
            bgcolor = 'red';
        }
        let itemStyle = null;
        if (item.list && item.list.length !== 0) {
            //非子节点
            itemStyle = {
                borderColor: '#000',
                color: bgcolor,
            };
        } else {
            //子节点
            itemStyle = {
                color: 'transparent',
                borderColor: '#ccc',
            };
        }
        //实现节点发光效果
        itemStyle = Object.assign(itemStyle, {
            shadowColor: 'rgba(202, 144, 3, 0.5)',
            shadowBlur: 20,
        });

        if (idx == 1) {
            category = item.name;
        }
        let obj = {
            name: item.name,
            symbolSize: symbolSize,
            category: category,
            label,
            color: bgcolor,
            itemStyle,
        };
        obj = Object.assign(item, obj);
        list.push(obj);
        if (item.list && item.list.length > 0) {
            handleList(item.list, idx + 1, color, category);
        }
    });
}
// 计算links
function handleLinks(arr, index) {
    arr.forEach((item) => {
        if (item.list) {
            item.list.forEach((item2, eq) => {
                let lineStyle = null;
                if (index === 0) {
                    //一级二级中间节点的线
                    lineStyle = {
                        normal: {
                            color: 'rgba(255,255,255,0.3)', //线
                            width: 3,
                        },
                    };
                } else {
                    lineStyle = {
                        normal: {
                            color: 'rgba(255,255,255,0.5)', //线
                            width: 1,
                        },
                    };
                }
                let obj = {
                    source: item.name,
                    target: item2.name,
                    value: 1111, //连接线上文字
                    lineStyle,
                };
                links.push(obj);
                if (item2.list && item.list.length > 0) {
                    handleLinks(item.list, index + 1);
                }
            });
        }
    });
}

option = {
    backgroundColor: '#020f3c',
    tooltip: {},
    toolbox: {
        show: true,
        left: 'right',
        right: 20,
        top: 'bottom',
        bottom: 20,
    },
    legend: {
        show: true,
        data: legend,
        textStyle: {
            color: '#fff',
            fontSize: 10,
        },
        // inactiveColor: "#fff",
        icon: 'circle',
        type: 'scroll',
        orient: 'vertical',
        left: 'right',
        right: 20,
        top: 20,
        bottom: 80,
        // itemWidth: 12,
        // itemHeight: 12,
        pageIconColor: '#00f6ff',
        pageIconInactiveColor: '#fff',
        pageIconSize: 12,
        pageTextStyle: {
            color: '#fff',
            fontSize: 12,
        },
    },
    selectedMode: 'false',
    bottom: 20,
    left: 0,
    right: 0,
    confine: true,
    top: 0,
    animationDuration: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
        {
            name: '知识图谱',
            type: 'graph',
            hoverAnimation: true,
            layout: 'force',
            force: {
                repulsion: [-2, 100], //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                gravity: 0.03, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                edgeLength: [20, 200], //边的两个节点之间的距离，这个距离也会受 repulsion:[10, 50]值越小则长度越长
                layoutAnimation: true,
            },
            nodeScaleRatio: 0.6,
            draggable: true,
            roam: false, //鼠标缩放和平移
            symbol: 'circle',
            data: list,
            links: links,
            categories: categories,
            cursor: 'pointer',
            focusNodeAdjacency: true,
            scaleLimit: {
                //所属组件的z分层，z值小的图形会被z值大的图形覆盖
                min: 0, //最小的缩放值
                max: 9, //最大的缩放值
            },
            // edgeSymbol: ['circle', 'arrow'],
            // edgeSymbolSize: [4, 8],
            edgeLabel: {
                //连接线上文字
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 10,
                    },
                    formatter: '{c}',
                },
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    color: '#fff',
                    distance: 10,
                },
            },
            lineStyle: {
                normal: {
                    width: 1.5,
                    curveness: 0,
                    type: 'solid',
                },
            },
        },
    ],
};