版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xutongbao/article/details/83345832
<!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>