fix: 排名样式修改

spring

7 小时以前 519211ac232866afe6b081ae4a97916ad5f1d7d2

 src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue

@@ -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
@@ -127,10 +127,20 @@
    inverse: false,
    data: xdataName.value,
    axisLabel: {
      formatter: (params) => `{a|${params}}`,
      formatter: (value) => {
        if (!value) return ''
        const maxLen = 6 // 每行最多字符数，可按需调整
        if (value.length <= maxLen) return `{a|${value}}`

        const lines = []
        for (let i = 0; i < value.length; i += maxLen) {
          lines.push(value.slice(i, i + maxLen))
        }
        return lines.map((line) => `{a|${line}}`).join('\n')
      },
      rich: {
        a: {
          width: 160,
          width: 120,
          fontSize: 14,
          color: '#fff',
          padding: [5, 4, 5, 0],
@@ -183,6 +193,7 @@
    z: 6,
    type: 'bar',
    barWidth: 25,
    tooltip: { show: false },
    itemStyle: {
      color: 'rgba(255,255,255,.1)',
      barBorderRadius: [0, 20, 20, 0],
@@ -194,6 +205,7 @@
    type: 'bar',
    barWidth: 25,
    barGap: '-100%',
    tooltip: { show: false },
    itemStyle: {
      color: {
        type: 'linear',
@@ -274,12 +286,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>