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

yyb

2 天以前 e8e09f89afd92e88aa55076d981bbeb232ad68df

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

@@ -25,7 +25,7 @@
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from '../PanelHeader.vue'
import DateTypeSwitch from '../DateTypeSwitch.vue'
import { statisticsReceivablePayable } from '@/api/viewIndex.js'
import { supplierPurchaseRanking } from '@/api/viewIndex.js'

const chartStyle = {
  width: '100%',
@@ -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 },
@@ -242,6 +241,7 @@
      z: 6,
      type: 'bar',
      barWidth: 25,
      tooltip: { show: false },
      itemStyle: {
        color: 'rgba(255,255,255,.1)',
        barBorderRadius: [0, 20, 20, 0],
@@ -252,6 +252,7 @@
      type: 'bar',
      barWidth: 25,
      barGap: '-100%',
      tooltip: { show: false },
      itemStyle: {
        color: {
          type: 'linear',
@@ -282,16 +283,15 @@
  ]
})

// 应付应收统计
const statisticsReceivable = () => {
  statisticsReceivablePayable({ type: radio1.value })
// 供应商采购排名
const fetchSupplierRanking = () => {
  supplierPurchaseRanking({ type: radio1.value })
    .then((res) => {
      // 假设 API 返回的数据格式为数组，包含 NAME 和 NUM 字段
      // 如果返回格式不同，需要根据实际 API 调整
      if (res.data && Array.isArray(res.data)) {
        dataArr.value = res.data
      } else if (res.data && res.data.list) {
        dataArr.value = res.data.list
      if (res.code === 200 && Array.isArray(res.data)) {
        dataArr.value = res.data.map(item => ({
          NAME: item.supplierName,
          NUM: item.totalAmount
        }))
      } else {
        // 如果没有数据，使用模拟数据
        dataArr.value = [
@@ -318,11 +318,11 @@

// 处理日期类型切换
const handleDateTypeChange = (value) => {
  statisticsReceivable()
  fetchSupplierRanking()
}

onMounted(() => {
  statisticsReceivable()
  fetchSupplierRanking()
})
</script>