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

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" />
@@ -104,13 +104,19 @@
  formatter: function (params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div>${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,26 +133,13 @@
    inverse: false,
    data: xdataName.value,
    axisLabel: {
      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: 120,
          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 },