@speedy-js/depcost
Version:
[](https://npm.im/@speedy-js/depcost)
60 lines (49 loc) • 1.23 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.0.12/dist/g2.min.js"></script>
</head>
<body>
<div id="container" style="width: 1024px; height: 600px; margin: auto;"></div>
<script>
const Chart = G2.Chart;
const data = {{ data }};
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
padding: [40, 0],
});
chart.coordinate('theta', {
startAngle: Math.PI, // 起始角度
endAngle: Math.PI * (3 / 2), // 结束角度
});
chart.data(data);
chart.scale('percent', {
formatter: (val) => {
val = val * 100 + '%';
return val;
},
});
chart.tooltip({
showTitle: false,
showMarkers: false,
});
chart
.interval()
.position('percent')
.color('item')
.label('percent', {
content: (data) => {
return `${data.item}: ${data.size}`;
},
})
.adjust('stack');
chart.interaction('element-active');
chart.render();
</script>
</body>
</html>