<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 ATitle from "@/components/ATitle.vue";
import * as echarts from "echarts";

onMounted(() => {
	const myChart = echarts.init(document.getElementById("container"));

	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 option = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "cross",
				crossStyle: {
					color: "#999",
				},
			},
		},
		legend: {
			data: ["混凝土C20", "混凝土C30", "混凝土C35", "总价", "账期"],
		},
		xAxis: [
			{
				type: "category",
				data: [
					"第一商砼有限公司",
					"第二商砼有限公司",
					"第三商砼有限公司",
				],
				axisPointer: {
					type: "shadow",
				},
			},
		],
		yAxis: [
			{
				type: "value",
				name: "价格",
				axisLabel: {
					formatter: "{value} 元",
				},
			},
			{
				type: "value",
				name: "账期",
				interval: 6,
				axisLabel: {
					formatter: "{value} 个月",
				},
			},
		],
		series: [
			{
				name: "混凝土C20",
				type: "bar",
				stack: "Ad",
				barWidth: 30,
				label: {
					show: true,
					position: "top",
					formatter(value) {
						console.log(value);
						return `${value.data}元`;
					},
				},
				tooltip: {
					valueFormatter: function (value) {
						return value + " 元";
					},
				},
				data: [32000, 35000, 32000],
			},
			{
				name: "混凝土C30",
				type: "bar",
				stack: "Ad",
				label: {
					show: true,
					position: "top",
					formatter(value) {
						console.log(value);
						return `${value.data}元`;
					},
				},
				tooltip: {
					valueFormatter: function (value) {
						return value + " 元";
					},
				},
				data: [33000, 36000, 32000],
			},
			{
				name: "混凝土C35",
				type: "bar",
				stack: "Ad",
				label: {
					show: true,
					position: "top",
					formatter(value) {
						console.log(value);
						return `${value.data}元`;
					},
				},
				tooltip: {
					valueFormatter: function (value) {
						return value + " 元";
					},
				},
				data: [34000, 37000, 33000],
			},
			{
				name: "总价",
				type: "bar",
				stack: "total",
				barWidth: 60,
				label: {
					show: true,
					position: "top",
					formatter(value) {
						console.log(value);
						return `${value.data}元`;
					},
				},
				tooltip: {
					valueFormatter: function (value) {
						return value + " 元";
					},
				},
				data: [99000, 108000, 97000],
			},
			{
				name: "账期",
				type: "bar",
				yAxisIndex: 1,
				barWidth: 60,
				label: {
					show: true,
					position: "top",
					formatter(value) {
						console.log(value);
						return `${value.data}个月`;
					},
				},
				tooltip: {
					valueFormatter: function (value) {
						return value + " 个月";
					},
				},
				data: [6, 12, 18],
			},
		],
	};

	myChart.setOption(option);
});
</script>
<style>
#container {
	height: 70vh;
}
</style>
