echarts-graph-modularity.js 图形模块化插件-BFW插件库

echarts-graph-modularity.js 图形模块化插件
第一步引入bfwone，并加载依赖项echart
第二步执行插件代码
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=echarts&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["echarts-graph-modularity"], function() {
                var chart = echarts.init(document.getElementById('main'));
                var nodeData = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73];
                var edgeData = [{
                    'source': 5, 'target': 0, 'weight': 1.2857142857142856
                }, {
                    'source': 8, 'target': 5, 'weight': 0.125
                }, {
                    'source': 10, 'target': 5, 'weight': 0.125
                }, {
                    'source': 14, 'target': 33, 'weight': 0.2
                }, {
                    'source': 16, 'target': 17, 'weight': 0.5
                }, {
                    'source': 16, 'target': 57, 'weight': 0.2
                }, {
                    'source': 17, 'target': 16, 'weight': 0.5
                }, {
                    'source': 17, 'target': 0, 'weight': 0.25
                }, {
                    'source': 20, 'target': 38, 'weight': 0.25
                }, {
                    'source': 20, 'target': 36, 'weight': 0.8333333333333333
                }, {
                    'source': 29, 'target': 17, 'weight': 0.5
                }, {
                    'source': 32, 'target': 17, 'weight': 0.25
                }, {
                    'source': 33, 'target': 2, 'weight': 0.3333333333333333
                }, {
                    'source': 33, 'target': 4, 'weight': 0.2
                }, {
                    'source': 34, 'target': 35, 'weight': 0.75
                }, {
                    'source': 34, 'target': 58, 'weight': 0.16666666666666666
                }, {
                    'source': 34, 'target': 9, 'weight': 0.5
                }, {
                    'source': 35, 'target': 34, 'weight': 0.75
                }, {
                    'source': 36, 'target': 35, 'weight': 0.3333333333333333
                }, {
                    'source': 36, 'target': 57, 'weight': 0.2
                }, {
                    'source': 38, 'target': 0, 'weight': 0.5
                }, {
                    'source': 38, 'target': 20, 'weight': 0.25
                }, {
                    'source': 38, 'target': 58, 'weight': 0.16666666666666666
                }, {
                    'source': 37, 'target': 35, 'weight': 0.5833333333333333
                }, {
                    'source': 39, 'target': 7, 'weight': 0.2
                }, {
                    'source': 40, 'target': 0, 'weight': 0.5
                }, {
                    'source': 41, 'target': 21, 'weight': 0.1111111111111111
                }, {
                    'source': 41, 'target': 52, 'weight': 0.5
                }, {
                    'source': 42, 'target': 22, 'weight': 0.5
                }, {
                    'source': 43, 'target': 15, 'weight': 0.9663059163059161
                }, {
                    'source': 44, 'target': 43, 'weight': 0.39285714285714285
                }, {
                    'source': 45, 'target': 14, 'weight': 0.16666666666666666
                }, {
                    'source': 45, 'target': 58, 'weight': 0.41666666666666663
                }, {
                    'source': 46, 'target': 47, 'weight': 0.5095238095238095
                }, {
                    'source': 47, 'target': 46, 'weight': 0.5095238095238095
                }, {
                    'source': 48, 'target': 46, 'weight': 1.4773809523809522
                }, {
                    'source': 49, 'target': 30, 'weight': 0.4583333333333333
                }, {
                    'source': 50, 'target': 8, 'weight': 0.14285714285714285
                }, {
                    'source': 51, 'target': 8, 'weight': 0.14285714285714285
                }, {
                    'source': 51, 'target': 0, 'weight': 0.2
                }, {
                    'source': 52, 'target': 41, 'weight': 0.5
                }, {
                    'source': 53, 'target': 20, 'weight': 0.25
                }, {
                    'source': 54, 'target': 20, 'weight': 0.25
                }, {
                    'source': 56, 'target': 54, 'weight': 0.3333333333333333
                }, {
                    'source': 57, 'target': 58, 'weight': 1.6666666666666665
                }, {
                    'source': 58, 'target': 0, 'weight': 1.3666666666666665
                }, {
                    'source': 59, 'target': 0, 'weight': 0.2
                }, {
                    'source': 60, 'target': 28, 'weight': 0.16666666666666666
                }, {
                    'source': 61, 'target': 60, 'weight': 0.16666666666666666
                }, {
                    'source': 55, 'target': 9, 'weight': 1.3095238095238095
                }, {
                    'source': 62, 'target': 9, 'weight': 0.39285714285714285
                }, {
                    'source': 63, 'target': 58, 'weight': 0.5
                }, {
                    'source': 64, 'target': 57, 'weight': 0.2
                }, {
                    'source': 65, 'target': 64, 'weight': 0.3333333333333333
                }, {
                    'source': 66, 'target': 15, 'weight': 0.25
                }, {
                    'source': 67, 'target': 15, 'weight': 2.2
                }, {
                    'source': 67, 'target': 20, 'weight': 0.25
                }, {
                    'source': 68, 'target': 15, 'weight': 0.25
                }, {
                    'source': 69, 'target': 22, 'weight': 0.6984126984126984
                }, {
                    'source': 70, 'target': 9, 'weight': 0.14285714285714285
                }, {
                    'source': 70, 'target': 22, 'weight': 0.3333333333333333
                }, {
                    'source': 71, 'target': 14, 'weight': 0.3333333333333333
                }, {
                    'source': 72, 'target': 71, 'weight': 0.3333333333333333
                }, {
                    'source': 73, 'target': 3, 'weight': 0.2222222222222222
                }];


                nodeData = nodeData.map(function (nodeId) {
                    return {
                        id: nodeId + '',
                        value: 1
                    };
                });

                edgeData = edgeData.map(function (edge) {
                    return {
                        source: edge.source,
                        target: edge.target,
                        value: edge.weight
                    };
                });

                var itemStyle = {
                    normal: {
                        borderColor: '#fff',
                        borderWidth: 2
                    }
                };

                var option = {
                    title: [{
                        text: 'Without Modularity',
                        left: '25%',
                        top: '10%',
                        textAlign: 'center'
                    }, {
                        text: 'With Modularity',
                        left: '75%',
                        top: '10%',
                        textAlign: 'center'
                    }],
                    series: [{
                        name: 'Without Modularity',
                        type: 'graph',
                        layout: 'force',
                        itemStyle: itemStyle,
                        data: nodeData,
                        edges: edgeData,
                        left: 0,
                        top: 0,
                        width: '50%',
                        bottom: 0
                    }, {
                        name: 'With Modularity',
                        type: 'graph',
                        layout: 'force',
                        modularity: {
                            resolution: 10
                        },
                        itemStyle: itemStyle,
                        data: nodeData,
                        edges: edgeData,
                        left: '50%',
                        top: 0,
                        width: '50%',
                        bottom: 0,
                        lineStyle: {
                            normal: {
                                color: 'source'
                            }
                        }
                    }]
                };

                chart.setOption(option);


            });
        });
    </script>
</head>
<body>
    <div id="main" style="width: 800px;height:400px;"></div>
</body>
</html>