SOURCE

// 注意由于分类轴的顺序是从下往上的，所以数组的数值顺序要从小到大
let data = [
    { country: '1', type: 'a', value: 2100, },
    { country: '2', type: 'a', value: 2088, },
    { country: '3', type: 'a', value: 2078, },
    { country: '4', type: 'a', value: 2000, },
    { country: '5', type: 'a', value: 2089, },

    { country: '1', type: 'b', value: 82, },
    { country: '2', type: 'b', value: 85, },
    { country: '3', type: 'b', value: 89, },
    { country: '4', type: 'b', value: 76, },
    { country: '5', type: 'b', value: 91, },

    { country: '1', type: 'c', value: 82, },
    { country: '2', type: 'c', value: 85, },
    { country: '3', type: 'c', value: 89, },
    { country: '4', type: 'c', value: 76, },
    { country: '5', type: 'c', value: 91, },

    { country: '1', type: 'd', value: 0, },
    { country: '2', type: 'd', value: 50, },
    { country: '3', type: 'd', value: 30, },
    { country: '4', type: 'd', value: 56, },
    { country: '5', type: 'd', value: 74, },

    { country: '1', type: 'e', value: 100, },
    { country: '2', type: 'e', value: 50, },
    { country: '3', type: 'e', value: 30, },
    { country: '4', type: 'e', value: 56, },
    { country: '5', type: 'e', value: 74, },
];

const chart = new G2.Chart({
    container: 'container',
    forceFit: true,
    height: 500
});
chart.source(data, {
    'country': {
        sync: true,
    },
    'type': {
        sync: true,
    }
});
chart.legend(false);

const axis = (chart) => {
    chart.axis('country', {
        label: {
            offset: 20, // 数值，设置坐标轴文本 label 距离坐标轴线的距离
            // offsetX: {number}, // 在 offset 的基础上 x 方向的偏移量
            // offsetY: {number}, // 在 offset 的基础上 y 方向的偏移量
            // // 设置文本的显示样式，还可以是个回调函数，回调函数的参数为该坐标轴对应字段的数值
            // rotate: 30, // 注意，旋转角度的配置不再在 textStyle 里配置
            textStyle: {
                textAlign: 'end', // 文本对齐方向，可取值为： start center end
                fill: 'white', // 文本的颜色
                fontSize: '20', // 文本大小
                fontWeight: 'bold', // 文本粗细
                textBaseline: 'middle', // 文本基准线，可取 top middle bottom，默认为middle
            },
            // /**
            //  * 用于格式化坐标轴上显示的文本信息的回调函数
            //  * @param  {string} text  文本值
            //  * @param  {object} item  该文本值对应的原始数据记录
            //  * @param  {number} index 索引值
            //  * @return {string}       返回格式化后的文本值
            //  */
            // formatter(text, item, index) {
            //     console.log(text, item, index)
            //     return text;
            // },
            // /**
            //  * 使用 html 渲染文本
            //  * @param  {string} text  文本值
            //  * @param  {object} item  该文本值对应的原始数据记录
            //  * @param  {number} index 索引值
            //  * @return {string}       返回 html 字符串
            //  */
            // htmlTemplate(text, item, index) {
            //     return `<div style="color:white;">
            //     <div>${text}</div>
            //     <div>${_.find(data2, ['country', text]).paihao}</div>
            //     </div>`
            // }
        },
        line: null,
        tickLine: null,
    });
}

const facet = (chart) => {
    const Shape = G2.Shape;
    Shape.registerShape('interval', 'textInterval', {
        getPoints(cfg) {
            const x = cfg.x;
            const y = cfg.y;
            const y0 = cfg.y0;
            const width = cfg.size;
            return [
                { x: x - 1 / 20, y: y0 },
                { x: x - 1 / 20, y: y },
                { x: x + 1 / 20, y: y },
                { x: x + 1 / 20, y: y0 }
            ]
        },
        draw: function draw(cfg, group) {
            // const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
            let value = cfg.origin._origin.value;
            const type = cfg.origin._origin.type;

            group.addShape('text', {
                attrs: {
                    text: value + '',
                    textAlign: 'left',
                    x: cfg.x + 3,
                    y: cfg.y + 6,
                    fontFamily: 'PingFang SC',
                    fontSize: 12,
                    // fontWeight: 'bold',
                    fill: '#FFFFFF'
                }
            });
            let path = this.parsePoints(cfg.points);
            if (path[1].x - path[0].x !== 0)
                return group.addShape('rect', {
                    attrs: {
                        x: path[0].x, // 矩形起始点为左上角
                        y: path[2].y,
                        width: path[1].x - path[0].x,
                        height: path[1].y - path[2].y,
                        fill: cfg.color,
                        radius: 10
                    }
                });
        }
    })
    chart.facet('list', {
        fields: ['type'],
        colTitle: {
            offsetY: -15, // 列标题垂直方向的偏移
            style: {
                fontSize: 20,
                textAlign: 'center',
                fill: 'white'
            } // 标题文本样式
        },
        autoSetAxis: true,
        padding: 20,
        eachView(view, facet) {
            chart.axis('country', false);
            view.axis('value', false);
            const max = _.maxBy(facet.data, 'value').value;
            const min = _.minBy(facet.data, 'value').value;
            const range = max - min;
            const multiple = 0.1;
            view.scale('value', {
                min: min * 0.85,
                max: max * 1.15,
            });
            view.coord().transpose();
            view.interval().shape('textInterval').position('country*value').color('type').style({ radius: [5, 5, 0, 0] });;
        }
    });
}

axis(chart);
facet(chart);

chart.render();

let i = 1;
setInterval(() => {
    let newData = _.filter(data, (obj) => {
        return obj.country != i+''
    });
    newData = _.concat(newData, 
        { country: i+5+'', type: 'a', value: 2075, },
        { country: i+5+'', type: 'b', value: 75, },
        { country: i+5+'', type: 'c', value: 75, },
        { country: i+5+'', type: 'd', value: 75, },
        { country: i+5+'', type: 'e', value: 75, },)
    chart.changeData(newData);
    data = newData;
    i++;
}, 1000);

<!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;
		}
	</style>
        <script src="https://unpkg.com/localforage@1.7.3/dist/localforage.js"></script>
</head>

<body>
	<div id="container"></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>
</body>

</html>

#container {
    background: #0e1b49;
}