<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height">
<title>g2雷达图</title>
<style>
::-webkit-scrollbar {
display: none;
}
html,
body {
overflow: hidden;
height: 100%;
margin: 0;
}
.m-mount {
margin: 10px 0 0 10px;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div id="mountNode" class="m-mount"></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.1/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>
var _DataSet = DataSet,
DataView = _DataSet.DataView;
var data = [{
item: '外网安全',
num: 20
}, {
item: '应用服务',
num: 80
}, {
item: '内网安全',
num: 50
}, {
item: 'app安全',
num: 40
}, {
item: 'web服务',
num: 60
}, {
item: '安全意识',
num: 95
}, {
item: '主机服务',
num: 80
}, {
item: '修复加固',
num: 70
}];
var dv = new DataView().source(data);
dv.transform({
type: 'fold',
fields: ['num'], // 展开字段集
key: 'user', // key字段
value: 'score' // value字段
});
var chart = new G2.Chart({
container: 'mountNode',
forceFit: false,
padding: [0, 5, 0, 5],
width: 150,
height: 150
});
chart.source(dv, {
score: {
min: 0,
max: 100
}
});
chart.coord('polar', {
radius: 0.8
});
chart.axis('item', {
line: null,
tickLine: null,
label: null,
grid: {
lineStyle: {
stroke: '#373737',
lineDash: null
},
hideFirstLine: false
}
});
chart.axis('score', {
line: null,
tickLine: null,
label: null,
grid: {
type: 'hollow', //polygon hollow
lineStyle: {
stroke: '#373737', // 网格线的颜色
lineDash: null
},
}
});
chart.legend(false);
chart.tooltip(false);
chart.line().position('item*score').color('user', '#5AA8D8').size(2);
chart.point().position('item*score').color('user', '#5AA8D8').shape('circle').size(4).style({
stroke: '#fff',
lineWidth: 1,
fillOpacity: 1
});
chart.area().position('item*score').color('user', '#5aa8d8').opacity(0.2);
chart.render();
</script>
</body>
</html>
