气泡图 - 爱码网

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>气泡图</title>
    <style>
    ::-webkit-scrollbar {
        display: none;
    }

    html,
    body {
        overflow: hidden;
        height: 100%;
        margin: 0;
    }

    .m-bubble {
        margin: 10px 0 0 0;
        width: 390px;
        height: 180px;
    }
    </style>
</head>

<body>
    <div id="mountNode" class="m-bubble"></div>
    <script>
    /*Fixing iframe window.innerHeight 0 issue in Safari*/
    document.body.clientHeight;
    </script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.3.2/dist/g2.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
    <script>
    let data = [];
    for (let i = 0; i < 10; i++) {
        let temp = {};
        temp.port = parseInt(Math.random() * 20);
        temp.domainName = parseInt(Math.random() * 20);
        temp.url = parseInt(Math.random() * 20);
        temp.sum = temp.port + temp.url + temp.url;
        temp.net = \'inner\';
        data.push(temp);
    }
    for (let i = 0; i < 10; i++) {
        let temp = {};
        temp.port = parseInt(Math.random() * 20);
        temp.domainName = parseInt(Math.random() * 20);
        temp.url = parseInt(Math.random() * 20);
        temp.sum = temp.port + temp.url + temp.url;
        temp.net = \'outer\';
        data.push(temp);
    }
    var _G = G2,
        Global = _G.Global;

    var colorMap = {
        \'inner\': \'#9c6b47\',
        \'outer\': \'#9b9851\'
    };
    var init = function(data) {
        var chart = new G2.Chart({
            container: \'mountNode\',
            forceFit: true,
            padding: [30, 10, 30, 50],
            width: 390,
            height: 180,
            animate: false
        });
        chart.source(data);
        let portMax = 0,
            domainNameMax = 0;
        for (let i = 0; i < data.length; i++) {
            let portTemp = data[i].port + 10;
            let domainNameTemp = data[i].domainName + 10;
            if (portTemp > portMax) {
                portMax = portTemp;
            }
            if (domainNameTemp > domainNameMax) {
                domainNameMax = domainNameTemp;
            }
        }
        chart.scale({
            port: {
                alias: \'端口\',
                min: 0,
                max: portMax
            },
            domainName: {
                alias: \'域名\',
                min: 0,
                max: domainNameMax
            },
            url: {
                alias: \'URL\'
            }
        });
        chart.axis(\'domainName\', {
            line: {
                stroke: \'#4c4c4c\'
            },
            tickLine: null,
            grid: {
                type: \'line\',
                lineStyle: {
                    stroke: \'#4c4c4c\',
                    lineWidth: 0.5,
                    lineDash: false
                }
            },
            label: {
                offset: 8,
                textStyle: {
                    fontSize: 12,
                    fill: \'#444444\'
                }
            }
        });
        chart.axis(\'port\', {
            line: {
                stroke: \'#4c4c4c\'
            },
            grid: {
                type: \'line\',
                lineStyle: {
                    stroke: \'#4c4c4c\',
                    lineWidth: 0.5,
                    lineDash: false
                }
            },
            label: {
                offset: -10,
                textStyle: {
                    fontSize: 12,
                    fill: \'#444444\'
                },
                formatter: function formatter(value) {
                    if (value === \'0\') {
                        return \'\';
                    } else {
                        return value;
                    }
                }
            }
        });
        chart.tooltip({
            showTitle: false
        });
        chart.legend(true, {
            width: 6,
            height: 4,
            position: \'top-right\',
            fill: \'#fdae6b\',
            marker: \'hyphen\',
            itemFormatter(val) {
                if (val === \'inner\') {
                    return \'内网\';
                } else if (val === \'outer\') {
                    return \'外网\';
                }
            }
        }); 
        chart.legend(\'sum\', false);      
        chart.point().position(\'domainName*port\').size(\'sum\', [2, 20]).color(\'net\', function(val) {
            return colorMap[val];
        }).shape(\'circle\').tooltip(\'port*domainName*url\').style(\'net\', {
            lineWidth: 1,
            strokeOpacity: 1,
            fillOpacity: 0.3,
            opacity: 0.65,
            stroke: function stroke(val) {
                return colorMap[val];
            }
        });
        chart.render();
    }(data);
    </script>
</body>

</html>