<template>
	<div class="form_wrap">
		<ATitle label="数据分析"></ATitle>
	</div>
	<a-divider />
	<div ref="container" id="container"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Chart } from "@antv/g2";
import ATitle from "@/components/ATitle.vue";

onMounted(() => {
	const data = [
		{ supplier: "第一商砼有限公司", type: "混凝土C20", value: 32000 },
		{ supplier: "第一商砼有限公司", type: "混凝土C30", value: 30000 },
		{ supplier: "第一商砼有限公司", type: "混凝土C35", value: 27000 },
		{ supplier: "第二商砼有限公司", type: "混凝土C20", value: 35000 },
		{ supplier: "第二商砼有限公司", type: "混凝土C30", value: 32000 },
		{ supplier: "第二商砼有限公司", type: "混凝土C35", value: 30000 },
		{ supplier: "第三商砼有限公司", type: "混凝土C20", value: 32000 },
		{ supplier: "第三商砼有限公司", type: "混凝土C30", value: 30000 },
		{ supplier: "第三商砼有限公司", type: "混凝土C35", value: 27000 },
	];

	const chart = new Chart({
		container: "container",
		autoFit: true,
		height: 500,
	});
	chart.data(data);
	chart.scale("value", {
		alias: "金额(元)",
	});
	chart.axis("supplier", {
		tickLine: null,
	});

	chart.axis("value", {
		label: {
			formatter: (text) => {
				return text.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
			},
		},
		title: {
			offset: 80,
			style: {
				fill: "#aaaaaa",
			},
		},
	});
	chart.legend({
		position: "right",
	});

	chart.tooltip({
		shared: true,
		showMarkers: false,
		title: (title, datum) => {
			return `${title}总报价${datum["value"] * 5}元`;
		},
	});
	chart.interaction("active-region");

	chart
		.interval()
		.adjust("stack")
		.position("supplier*value")
		.color("type", ["#40a9ff", "#1890ff", "#096dd9", "#0050b3"]);
	chart.render();
});
</script>
<style>
#container {
	height: 70vh;
}
</style>
