| | |
| | | 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%', |
| | |
| | | // 原始数据(统一成 { 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 |
| | |
| | | z: 6, |
| | | type: 'bar', |
| | | barWidth: 25, |
| | | tooltip: { show: false }, |
| | | itemStyle: { |
| | | color: 'rgba(255,255,255,.1)', |
| | | barBorderRadius: [0, 20, 20, 0], |
| | |
| | | type: 'bar', |
| | | barWidth: 25, |
| | | barGap: '-100%', |
| | | tooltip: { show: false }, |
| | | itemStyle: { |
| | | color: { |
| | | type: 'linear', |
| | |
| | | dataArr.value = getMockListByType(type).map(normalizeItem) |
| | | } |
| | | |
| | | const handleDateTypeChange = () => { |
| | | 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 = () => { |
| | | fetchCustomerRanking() |
| | | } |
| | | |
| | | onMounted(() => { |
| | | setMockData(dateType.value) |
| | | fetchCustomerRanking() |
| | | }) |
| | | </script> |
| | | |