<template>
	<div class="pieChartsWrap">
		<div class="item">
			<Echarts :option="pie1Option"></Echarts>
		</div>
		<div class="item">
			<Echarts :option="pie2Option"></Echarts>
		</div>
	</div>
</template>

<script setup>
import Echarts from "@/components/Chart/index.vue";
import { getPieOption } from "../../utils/charts";
import { ref, onMounted, shallowRef } from "vue";
const pie1Option = shallowRef({});
const pie2Option = shallowRef({});
onMounted(() => {
	pie1Option.value = getPieOption(
		[
			{ name: "能源领域", value: 30 },
			{ name: "集成电路领域", value: 20 },
			{ name: "人工智能领域", value: 12 },
			{ name: "通信网络领域", value: 18 },
			{ name: "量子科技领域", value: 10 },
			{ name: "生物科技领域", value: 10 }
		],
		"领域分布"
	);
	pie2Option.value = getPieOption(
		[
			{ name: "能源领域", value: 30 },
			{ name: "集成电路领域", value: 20 },
			{ name: "人工智能领域", value: 12 },
			{ name: "通信网络领域", value: 18 },
			{ name: "量子科技领域", value: 10 },
			{ name: "生物科技领域", value: 10 }
		],
		"类别分布"
	);
});
</script>

<style lang="scss" scoped>
.pieChartsWrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	padding-top: 6px;
	.item {
		width: 460px;
		height: 388px;
		background-color: rgba(231, 243, 255, 0.5);
	}
}
</style>
