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

yyb

2 天以前 e8e09f89afd92e88aa55076d981bbeb232ad68df

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

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

@@ -110,7 +110,13 @@
  },
}))

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 },

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

@@ -126,10 +126,14 @@
  }
})

// grid
const grid = computed(() => {
  return { top: 0, left: '20%', right: '10%', bottom: 0 }
})
// grid：containLabel 为左侧名称、右侧百分比预留空间，避免裁切
const grid = computed(() => ({
  top: 8,
  left: 12,
  right: 14,
  bottom: 8,
  containLabel: true,
}))

// xAxis
const xAxis = computed(() => {
@@ -151,27 +155,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))
          }
          // 多行文本，每行都套同一个 rich 样式
          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 },