<template>
	<div id="TiaoXingTu03"></div>
</template>

<script setup>
	import { onMounted } from 'vue'
	import { Bar } from '@antv/g2plot'

	const data = [
		{
			label: 'Mon.',
			type: 'series1',
			value: 2800
		},
		{
			label: 'Mon.',
			type: 'series2',
			value: 2260
		},
		{
			label: 'Tues.',
			type: 'series1',
			value: 1800
		},
		{
			label: 'Tues.',
			type: 'series2',
			value: 1300
		},
		{
			label: 'Wed.',
			type: 'series1',
			value: 950
		},
		{
			label: 'Wed.',
			type: 'series2',
			value: 900
		},
		{
			label: 'Thur.',
			type: 'series1',
			value: 500
		},
		{
			label: 'Thur.',
			type: 'series2',
			value: 390
		},
		{
			label: 'Fri.',
			type: 'series1',
			value: 170
		},
		{
			label: 'Fri.',
			type: 'series2',
			value: 100
		}
	]

	onMounted(() => {
		const stackedBarPlot = new Bar('TiaoXingTu03', {
			data,
			isGroup: true,
			xField: 'value',
			yField: 'label',
			/** 自定义颜色 */
			// color: ['#1383ab', '#c52125'],
			seriesField: 'type',
			marginRatio: 0,
			label: {
				// 可手动配置 label 数据标签位置
				position: 'middle', // 'left', 'middle', 'right'
				// 可配置附加的布局方法
				layout: [
					// 柱形图数据标签位置自动调整
					{ type: 'interval-adjust-position' },
					// 数据标签防遮挡
					{ type: 'interval-hide-overlap' },
					// 数据标签文颜色自动调整
					{ type: 'adjust-color' }
				]
			}
		})

		stackedBarPlot.render()
	})
</script>

<style scoped></style>
