echarts——关系图

最新推荐文章于 2024-05-24 17:52:25 发布

贝塔贝卡贝

最新推荐文章于 2024-05-24 17:52:25 发布

阅读量647

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/kiruthika/article/details/130831308

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .myChart {
            width: 100%;
            height: 900px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div>
        <div id="myChart" class="myChart" />
    </div>

    <script src="./echart/echarts.min.js"></script>
    <script>
        function changeData() {
            var data, linksData
            data = [
                { 
                    name: '玛丽亚',
                    symbolSize: 100,
                    value:40
                 },
                 { 
                    name: '宏宇',
                    symbolSize: 50,
                    value:14
                 },
                  { 
                    name: '任小仙',
                    symbolSize: 60,
                    value:22
                 }
                ]
            linksData = [{
                source: '玛丽亚',
                target: '宏宇',
                relationshipName: '朋友'
            }, {
                source: '玛丽亚',
                target: 'imipramine',
                relationshipName: '朋友'
            }, {
                source: '宏宇',
                target: '任小仙',
                relationshipName: '朋友'
            }, {
                source: '玛丽亚',
                target: '任小仙',
                relationshipName: '同事'
            }, {
                source: '玛丽亚',
                target: '任小仙',
                relationshipName: '家人'
            }, {
                relationshipName: '战友',
                target: '玛丽亚',
                source: '任小仙'
            }, {
                relationshipName: '战友',
                target: '玛丽亚',
                source: '宏宇'
            }]

            var arr = []
            for (const i in linksData) {
                linksData[i].count = 0
                arr.push(linksData[i])
            }
            for (const i in linksData) {
                for (const j in arr) {
                    if ((arr[j].count === 0) && ((arr[j].source === linksData[i].source) && (arr[j].target === linksData[i].target)) || (arr[j].target === linksData[i].source) && (arr[j].source === linksData[i].target)) {
                        ++linksData[i].count
                    }
                }
            }
            for (const i in linksData) {
                linksData[i].label = {
                    show: true,
                    formatter: function (x) {
                        return x.data.relationshipName // 自定义线条之间的关系名称
                    }
                }
                linksData[i].lineStyle = {
                    curveness: (linksData[i].count - 1) * 0.2 // 线条弧度
                }
            }
            return {
                data, linksData
            }
        }

        makeChart()
        function makeChart() {
            var myChart = echarts.init(document.getElementById('myChart'))
            var list = changeData()
            var data = list.data
            var linksData = list.linksData

            var option = {
                backgroundColor: '#eeeeee', // 设置背景颜色
                title: {
                    text: '人物关系图',
                    top: 12,
                    left: 12,
                    textStyle: {
                        fontSize: 14,
                        color: '#444444'
                    }
                },
                tooltip: {
                    // trigger: 'none'
                    formatter: function (params) {
                        if(params.dataType === 'node'){
                            return `${params.data.name} ${params.data.value}` 
                        }
                    }
                }, // 提示框
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        type: 'graph',
                        layout: 'force',
                        // symbolSize: 100, // 倘若该属性不在link里，则其表示节点的大小；否则即为线两端标记的大小
                        roam: true, // 鼠标缩放功能
                        label: {
                            show: true // 是否显示标签
                        },
                        focusNodeAdjacency: true, // 鼠标移到节点上时突出显示结点以及邻节点和边
                        edgeSymbol: ['circle', 'arrow'], // 关系两边的展现形式，也即图中线两端的展现形式。arrow为箭头
                        edgeSymbolSize: [6, 6], // 设置两边箭头大小
                        draggable: true,
                        edgeLabel: {
                            fontSize: 14 // 关系（也即线）上的标签字体大小
                        },
                        force: {
                            repulsion: 400, // 节点之间的斥力因子值
                            edgeLength: 170 // 两个节点之间的距离
                        },
                        data: data,
                        links: linksData,
                        lineStyle: {
                            opacity: 0.9,
                            width: 2,
                            color: 'red' // 设置线条颜色 8ab7bd
                            // curveness: 0 // 设置线条的弧度
                        },
                        itemStyle: {
                            color: '#61a0a8',
                            fontSize: 12,
                            borderWidth: 1,
                            borderColor: '#ffffff',
                            shadowColor: 'rgba(0, 0, 0, 0.2)',
                            shadowBlur: 8
                        }
                    }
                ]
            }

            myChart.setOption(option, true)
            setTimeout(function () {
                window.onresize = function () {
                    myChart.resize()
                }
            }, 200)
        }
    </script>
</body>

</html>