G2Plot（antV）柱状图demo

图：

<template>
    <div id="container"></div>
</template>
<script>
import { Column } from '@antv/g2plot'
export default {
    mounted() {
        const data = [
            {
                name: 'London',
                月份: 'Jan.',
                月均降雨量: 18.9,
            },
            {
                name: 'London',
                月份: 'Feb.',
                月均降雨量: 28.8,
            },
            {
                name: 'London',
                月份: 'Mar.',
                月均降雨量: 39.3,
            },
            {
                name: 'London',
                月份: 'Apr.',
                月均降雨量: 81.4,
            },
            {
                name: 'London',
                月份: 'May',
                月均降雨量: 47,
            },
            {
                name: 'London',
                月份: 'Jun.',
                月均降雨量: 20.3,
            },
            {
                name: 'London',
                月份: 'Jul.',
                月均降雨量: 24,
            },
            {
                name: 'London',
                月份: 'Aug.',
                月均降雨量: 35.6,
            },
            {
                name: 'Berlin',
                月份: 'Jan.',
                月均降雨量: 12.4,
            },
            {
                name: 'Berlin',
                月份: 'Feb.',
                月均降雨量: 23.2,
            },
            {
                name: 'Berlin',
                月份: 'Mar.',
                月均降雨量: 34.5,
            },
            {
                name: 'Berlin',
                月份: 'Apr.',
                月均降雨量: 99.7,
            },
            {
                name: 'Berlin',
                月份: 'May',
                月均降雨量: 52.6,
            },
            {
                name: 'Berlin',
                月份: 'Jun.',
                月均降雨量: 35.5,
            },
            {
                name: 'Berlin',
                月份: 'Jul.',
                月均降雨量: 37.4,
            },
            {
                name: 'Berlin',
                月份: 'Aug.',
                月均降雨量: 42.4,
            },
        ]

        const stackedColumnPlot = new Column('container', {
            data,
            isGroup: true,
            xField: '月份',
            yField: '月均降雨量',
            seriesField: 'name',
            /** 设置颜色 */
            color: ['#1ca9e6', '#f88c24'],
            /** 设置间距 */
            marginRatio: 0.1,
            label: {
                // 可手动配置 label 数据标签位置
                position: 'middle', // 'top', 'middle', 'bottom'
                // 可配置附加的布局方法
                layout: [
                    // 柱形图数据标签位置自动调整
                    { type: 'interval-adjust-position' },
                    // 数据标签防遮挡
                    { type: 'interval-hide-overlap' },
                    // 数据标签文颜色自动调整
                    { type: 'adjust-color' },
                ],
            },


            xAxis: {
                title: {     //title:null 不显示title
                    style: {
                        fontSize: 14,
                        fill: 'red', // 文本颜色
                    },
                },
                label: {
                    style: {
                        fill: 'green'
                    },
                    autoHide: true,
                    autoRotate: false,
                },
            },

            yAxis: {
                title: {     //title:null 不显示title
                    style: {
                        fontSize: 14,
                        fill: 'red', // 文本颜色
                    },
                },
                label: {
                    style: {
                        fill: 'green'
                    },
                    autoHide: true,
                    autoRotate: false,
                },
                line: {
                    style: {
                        stroke: 'red',
                    }
                }
            },

            legend: {
                // layout: 'horizontal',
                position: 'right'
            },
        });

        stackedColumnPlot.render();
    }
}

</script>

<style>
#container {
    width: 800px;
    height: 450px;
    margin: 50px auto;
}
</style>