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

yyb

2 天以前 e8e09f89afd92e88aa55076d981bbeb232ad68df

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

@@ -120,16 +120,20 @@
    textStyle: { fontSize: '100%' },
    formatter: function (params) {
      let result = params[0].axisValueLabel + '<br/>'
      result += `<div style="">${params[0].marker}${params[0].value}</div>`
      result += `<div>${params[0].marker}${params[0].value}元</div>`
      return result
    },
  }
})

// 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,18 +155,13 @@
      inverse: false,
      data: xdataName.value,
      axisLabel: {
        formatter: (params) => {
          return `{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 },