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

配置项如下
      dataLink = [{
        source: '引发因素',
        target: '人为因素',
        value: 66

    },
    {
        source: '引发因素',
        target: '自然因素',
        value: 88
    },
    {
        source: '自然因素',
        target: '用户分析',
        value: 12
    },
    {
        source: '自然因素',
        target: '话题分析',
        value: 18
    },
    {
        source: '自然因素',
        target: '评论分析',
        value: 50
    },
    {
        source: '人为因素',
        target: '图书分析',
        value: 23
    },
    {
        source: '人为因素',
        target: '借阅分析',
        value: 19
    },
    {
        source: '人为因素',
        target: '借阅排行',
        value: 6
    }, {
        source: '人为因素',
        target: '图书收录',
        value: 8

    }
]
dataSerise = [{
    name: '引发因素',
    symbolSize: 120,
    draggable: true,
    value: 0,
    category: 0,
    itemStyle: {
        normal: {
            borderColor: '#04f2a7',
            borderWidth: 4,
            shadowBlur: 10,
            shadowColor: '#04f2a7',
            color: '#001c43',
        }
    }
}]
for (var i = 0; i < dataLink.length; i++) {
    dataChild = {
        name: '',
        symbolSize: 0,
        value: 0,
        category: 0,
        itemStyle: {
            normal: {
                borderColor: '#82dffe',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43'
            }
        },
    }
    dataChild.value = dataLink[i].value
    dataChild.name = dataLink[i].target
    if (dataLink[i].source === '引发因素') {
        dataSerise[0].value += dataLink[i].value
        dataChild.symbolSize = 100
        dataChild.category = 1
        dataChild.itemStyle.normal.borderColor = '#5BD1FF'
    } else if (dataLink[i].source === '人为因素' || dataLink[i].source === '自然因素') {
        dataChild.symbolSize = 80
        dataChild.category = 2
        dataChild.itemStyle.normal.borderColor = '#b457ff'
    }
    dataSerise.push(dataChild)
}
option = {
    backgroundColor: '#black',
    tooltip: {
        trigger: 'item',
        formatter: (item) => {
            return item.name + ':' + item.data.value
        }
    },
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    color: ['#83e0ff', '#45f5ce', '#b158ff'],
    series: [{
        type: 'graph',
        layout: 'force',
        force: {
            repulsion: 1000,
            edgeLength: 50
        },
        roam: true,
        label: {
            normal: {
                show: true
            }
        },
        data: dataSerise,
        links: dataLink,
        lineStyle: {
            normal: {
                opacity: 0.9,
                width: 5,
                curveness: 0
            }
        },
        categories: [{
                name: '0'
            },
            {
                name: '1'
            },
            {
                name: '2'
            }
        ]
    }]
}
    
截图如下