气泡图

<!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>
猜你喜欢
