echarts 人物关系图demo

最新推荐文章于 2024-10-08 05:00:00 发布

木子李0531

最新推荐文章于 2024-10-08 05:00:00 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/lfbin5566/article/details/118709684

版权

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;

option = {
    title: {
        text: 'Graph 简单示例'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
        {
            type: 'graph',
            layout: 'circular',
            symbolSize: 50,
            roam: true,
            label: {
                show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [3, 10],
            focusNodeAdjacency: true,
            edgeLabel: {
                 normal: {
                    show: true,
                    textStyle: {
                        fontSize: 20
                    },
                    formatter: "{c}"
                }
            },
            // layout:'',
            data: [{
                name: '人物1',
                // x: 300,
                // y: 300
            }, {
                name: '人物2',
                // x: 800,
                // y: 300
            }, {
                name: '人物3',
                // x: 550,
                // y: 100
            }, {
                name: '人物4',
                // x: 550,
                // y: 500
            },{
                name: '人物5',
                // x: 580,
                // y: 400
            }],
            // links: [],
            links: [{

                source:0,
                target: 2,
                value: '父亲',
                // symbolSize: [5, 20],
                // label: {
                //     show: true,
                // },
                lineStyle: {
                    color: 'red',
                    curveness: '-0.4'
                }
            },{

                source:2,
                target: 0,
                value: '儿子',
                // symbolSize: [5, 20],
                // label: {
                //     show: true,
                // },
                lineStyle: {
                    color: 'pink',
                    curveness: 0.4
                }
            }, {
                source: 2,
                target: 3,
                value: '情人',
                lineStyle: {
                    curveness: -0.2
                }
            }, {
                source: 4,
                target: 0,
                value: '夫妻',
                lineStyle: {
                    color:'blue',
                    curveness: 0.1
                }
            }, {
                source: 0,
                target: 4,
                value: '夫妻',
                lineStyle: {
                    color:'red',
                    curveness: '-0.1'
                }
            },{
                source: 1,
                target: 2,
                value: '朋友',
            }, {
                source: 1,
                target: 3,
                value: '朋友',
            }, {
                source: 0,
                target: 3,
                value: '情人',
            }],
            lineStyle: {
                opacity: 0.9,
                width: 2,
                curveness: 0
            }
        }
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}
</script>
</body>
</html>