console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,height=device-height">
	<title>零钱管家 APP 收支占比趋势分析</title>
	<style>
		::-webkit-scrollbar {
			display: none;
		}

		html,
		body {
			overflow: hidden;
			height: 100%;
			margin: 0;
		}
	</style>
</head>

<body>
	<div id="mountNode"></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.5.1/dist/g2.min.js">

	</script>
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js">

	</script>
	<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js">

	</script>
	<script>
		var data = [{
    variety: '白班',
    type: '实际量',
    value: 2731,
}, {
    variety: '白班',
    type: '计划量',
    value: 2922,
}];

var Shape = G2.Shape;
Shape.registerShape('interval', 'textInterval', {
    draw: function draw(cfg, group) {
    var points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
    var value = cfg.origin._origin.value;
    group.addShape('text', {
        attrs: {
        text: value,
        textAlign: 'center',
        x: cfg.x,
        y: cfg.y,
        fontFamily: 'PingFang SC',
        fontSize: 12,
        fill: '#BBB'
        }
    });
    var polygon = group.addShape('polygon', {
        attrs: {
        points: points.map(function(point) {
            return [point.x, point.y];
        }),
        fill: cfg.color
        }
    });
    return polygon;
    }
});


var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: 500,
});

chart.source(data);
chart.interval().shape('textInterval').position('variety*value').color('type').opacity(1).adjust([{
    type: 'dodge',
    marginRatio: 1/32,
}]);
chart.render();
	</script>
</body>

</html>