product-inventory-management.git

			@@ -26,6 +26,7 @@
			import Echarts from '@/components/Echarts/echarts.vue'
			import PanelHeader from '../PanelHeader.vue'
			import DateTypeSwitch from '../DateTypeSwitch.vue'
			import { customerContributionRanking } from '@/api/viewIndex.js'

			const chartStyle = {
			width: '100%',
			@@ -49,7 +50,6 @@
			// 原始数据（统一成 { NAME, NUM }）
			const dataArr = ref([])

			// 仅保留金额最高的 5 条（并按从小到大展示，视觉上最高在最下方）
			const dataArray = computed(() => {
			const sortedAsc = [...dataArr.value].sort((a, b) => a.NUM - b.NUM)
			return sortedAsc.length > 5 ? sortedAsc.slice(-5) : sortedAsc
			@@ -183,6 +183,7 @@
			z: 6,
			type: 'bar',
			barWidth: 25,
			tooltip: { show: false },
			itemStyle: {
			color: 'rgba(255,255,255,.1)',
			barBorderRadius: [0, 20, 20, 0],
			@@ -194,6 +195,7 @@
			type: 'bar',
			barWidth: 25,
			barGap: '-100%',
			tooltip: { show: false },
			itemStyle: {
			color: {
			type: 'linear',
			@@ -274,12 +276,30 @@
			dataArr.value = getMockListByType(type).map(normalizeItem)
			}

			const fetchCustomerRanking = () => {
			customerContributionRanking({ type: dateType.value })
			.then((res) => {
			if (res.code === 200 && Array.isArray(res.data)) {
			dataArr.value = res.data.map(item => ({
			NAME: item.customerName,
			NUM: item.totalAmount
			}))
			} else {
			setMockData(dateType.value)
			}
			})
			.catch((error) => {
			console.error('获取客户金额贡献排名失败:', error)
			setMockData(dateType.value)
			})
			}

			const handleDateTypeChange = () => {
			setMockData(dateType.value)
			fetchCustomerRanking()
			}

			onMounted(() => {
			setMockData(dateType.value)
			fetchCustomerRanking()
			})
			</script>