product-inventory-management.git

			@@ -5,8 +5,8 @@
			<div class="filters-row">
			<DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />
			</div>
			<div class="pie-chart-wrapper">
			<div class="pie-background"></div>
			<div class="pie-chart-wrapper" ref="pieWrapperRef">
			<div class="pie-background" ref="pieBackgroundRef"></div>
			<Echarts
			ref="echartsRef"
			:chartStyle="chartStyle"
			@@ -23,11 +23,15 @@
			</template>

			<script setup>
			import { ref, onMounted, computed } from 'vue'
			import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
			import { productSalesAnalysis } from '@/api/viewIndex.js'
			import PanelHeader from './PanelHeader.vue'
			import Echarts from '@/components/Echarts/echarts.vue'
			import DateTypeSwitch from '@/views/reportAnalysis/financialAnalysis/components/DateTypeSwitch.vue'
			import { useChartBackground } from '@/hooks/useChartBackground.js'

			const pieWrapperRef = ref(null)
			const pieBackgroundRef = ref(null)

			const dateType = ref(1) // 1=周 2=月 3=季度

			@@ -133,6 +137,18 @@
			textStyle: { color: '#B8C8E0' },
			}

			// 使用封装的背景位置调整方法
			// 图表中心是 ['25%', '50%']，背景需要对齐到这个位置
			const { init: initBackground, cleanup: cleanupBackground } = useChartBackground({
			wrapperRef: pieWrapperRef,
			backgroundRef: pieBackgroundRef,
			left: '25%', // 图表中心 X 是 25%
			top: '50%', // 图表中心 Y 是 50%
			offsetX: '-51.5%', // X 轴偏移
			offsetY: '-50%', // Y 轴偏移
			watchData: pieDatas // 监听数据变化，自动调整位置
			})

			const fetchData = () => {
			productSalesAnalysis()
			.then((res) => {
			@@ -156,6 +172,11 @@

			onMounted(() => {
			fetchData()
			initBackground()
			})

			onBeforeUnmount(() => {
			cleanupBackground()
			})
			</script>

			@@ -190,9 +211,6 @@

			.pie-background {
			position: absolute;
			left: 25%;
			top: 50%;
			transform: translate(-51.5%, -50%);
			width: 310px;
			height: 310px;
			background-image: url('@/assets/BI/玫瑰图边框.png');
			@@ -201,5 +219,9 @@
			background-repeat: no-repeat;
			z-index: 1;
			pointer-events: none;
			/* 位置由 JS 动态设置，默认居中 */
			left: 25%;
			top: 50%;
			transform: translate(-51.5%, -50%);
			}
			</style>