优化数据仪表板的网格和坐标轴标签样式，调整边距和文本格式以提高可读性

yyb

2 天以前 e8e09f89afd92e88aa55076d981bbeb232ad68df

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

@@ -1,6 +1,6 @@
<template>
  <div>
    <PanelHeader title="客户金额贡献排名" />
    <PanelHeader title="客户贡献排名" />
    <div class="panel-item-customers">
      <div class="switch-container">
        <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />
@@ -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
@@ -104,13 +104,19 @@
  formatter: function (params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
      result += `<div>${item.marker} ${item.seriesName}: ${item.value}元</div>`
    })
    return result
  },
}))

const grid = computed(() => ({ top: 0, left: '20%', right: '10%', bottom: 0 }))
const grid = computed(() => ({
  top: 8,
  left: 12,
  right: 14,
  bottom: 8,
  containLabel: true,
}))

const xAxis = computed(() => [
  {
@@ -127,16 +133,13 @@
    inverse: false,
    data: xdataName.value,
    axisLabel: {
      formatter: (params) => `{a|${params}}`,
      rich: {
        a: {
          width: 160,
          fontSize: 14,
          color: '#fff',
          padding: [5, 4, 5, 0],
          align: 'right',
        },
      },
      color: '#fff',
      fontSize: 13,
      width: 200,
      overflow: 'break',
      align: 'right',
      margin: 10,
      lineHeight: 18,
    },
    axisLine: { show: false },
    axisTick: { show: false },
@@ -183,6 +186,7 @@
    z: 6,
    type: 'bar',
    barWidth: 25,
    tooltip: { show: false },
    itemStyle: {
      color: 'rgba(255,255,255,.1)',
      barBorderRadius: [0, 20, 20, 0],
@@ -194,6 +198,7 @@
    type: 'bar',
    barWidth: 25,
    barGap: '-100%',
    tooltip: { show: false },
    itemStyle: {
      color: {
        type: 'linear',
@@ -274,12 +279,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>