public/data-gl/graphgl-npm-dep.js

/*
title: NPM Dependencies with graphGL
category: graphGL
theme: dark
titleCN: 1w 节点 2w7 边的NPM 依赖图
shotDelay: 5000
shotWidth: 1920
*/

function loadScript(scriptUrl, cb) {
    var scriptTag = document.createElement('script');
    scriptTag.onload = cb;
    scriptTag.src = scriptUrl;
    document.body.appendChild(scriptTag);
}

loadScript('https://cdn.jsdelivr.net/npm/echarts-graph-modularity@2.0.0/dist/echarts-graph-modularity.min.js', function () {
    // Reinit chart again
    // TODO: visual encoding registerion must been done before echarts.init.
    var dom = myChart.getDom();
    myChart.dispose();
    myChart = echarts.init(dom);
    $.getJSON(ROOT_PATH + '/data-gl/asset/data/npmdep.json', function (data) {
        var nodes = data.nodes.map(function (nodeName, idx) {
            return {
                name: nodeName,
                value: data.dependentsCount[idx]
            }
        });
        var edges = [];
        for (var i = 0; i < data.edges.length;) {
            var s = data.edges[i++];
            var t = data.edges[i++];
            edges.push({
                source: s,
                target: t
            });
        }

        nodes.forEach(function (node) {
            // if (node.value > 100) {
                node.emphasis = {
                    label: {
                        show: true
                    }
                }
            // }
            if (node.value > 5000) {
                node.label = {
                    show: true
                }
            }
        });

        myChart.setOption({
            backgroundColor: '#000',
            series: [{
                color: ['rgb(203,239,15)', 'rgb(73,15,239)','rgb(15,217,239)','rgb(30,15,239)','rgb(15,174,239)','rgb(116,239,15)','rgb(239,15,58)','rgb(15,239,174)','rgb(239,102,15)','rgb(239,15,15)','rgb(15,44,239)','rgb(239,145,15)','rgb(30,239,15)','rgb(239,188,15)','rgb(159,239,15)','rgb(159,15,239)','rgb(15,239,44)','rgb(15,239,87)','rgb(15,239,217)','rgb(203,15,239)','rgb(239,15,188)','rgb(239,15,102)','rgb(239,58,15)','rgb(239,15,145)','rgb(116,15,239)','rgb(15,131,239)','rgb(73,239,15)','rgb(15,239,131)','rgb(15,87,239)','rgb(239,15,231)'],
                type: 'graphGL',
                nodes: nodes,
                edges: edges,
                modularity: {
                    resolution: 2,
                    sort: true
                },
                lineStyle: {
                    color: 'rgba(255,255,255,1)',
                    opacity: 0.05
                },
                itemStyle: {
                    opacity: 1
                    // borderColor: '#fff',
                    // borderWidth: 1
                },
                focusNodeAdjacency: false,
                focusNodeAdjacencyOn: 'click',
                symbolSize: function (value) {
                    return Math.sqrt(value / 10);
                },
                label: {
                    color: '#fff'
                },
                emphasis: {
                    label: {
                        show: false
                    },
                    lineStyle: {
                        opacity: 0.5,
                        width: 4
                    }
                },
                forceAtlas2: {
                    steps: 5,
                    stopThreshold: 20,
                    jitterTolerence: 10,
                    edgeWeight: [0.2, 1],
                    gravity: 5,
                    edgeWeightInfluence: 0
                    // preventOverlap: true
                }
            }]
        });
    });
});