fix: 统计分析ui进一步功能优化。

src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue

@@ -298,54 +298,75 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   })
   
   // 柱状图配置
-  const columnChartOpts = ref({
-    color: ['#667eea'],
-    padding: [20, 15, 35, 5],
-    enableScroll: false,
-    dataLabel: false,
-    legend: {
-      show: false
-    },
-    xAxis: {
-      disableGrid: true,
-      boundaryGap: 'center',
-      axisLine: false,
-      scrollShow: true,
-      itemCount: 5,
-      fontSize: 10,
-      fontColor: '#999999',
-      rotateLabel: true,
-      rotateAngle: 30
-    },
-    yAxis: {
-      gridType: 'dash',
-      dashLength: 4,
-      gridColor: '#EEEEEE',
-      splitNumber: 5,
-      fontSize: 10,
-      fontColor: '#999999',
-      format: (val) => {
-        if (val >= 10000) {
-          return (val / 10000).toFixed(1) + 'w'
-        }
-        return val.toFixed(0)
+  const columnChartOpts = computed(() => {
+    // 计算数据范围以动态设置Y轴
+    let minValue = 0
+    let maxValue = 0
+    if (listData.value && listData.value.length > 0) {
+      const values = listData.value.map(item => parseFloat(item.value) || 0)
+      const dataMin = Math.min(...values)
+      const dataMax = Math.max(...values)
+      
+      // 确保包含0轴
+      minValue = Math.min(0, dataMin)
+      maxValue = Math.max(0, dataMax)
+      
+      // 给数据留出更大的上下空间
+      const range = maxValue - minValue
+      if (range > 0) {
+        minValue = minValue - range * 0.1
+        maxValue = maxValue + range * 0.2
+      }
+    }
+    
+    return {
+      color: ['#667eea'],
+      padding: [15, 15, 80, 15],
+      enableScroll: false,
+      dataLabel: false,
+      legend: {
+        show: false
       },
-      data: [
-        {
-          min: 0
+      xAxis: {
+        disableGrid: true,
+        boundaryGap: 'center',
+        axisLine: false,
+        scrollShow: true,
+        itemCount: 5,
+        fontSize: 10,
+        fontColor: '#999999',
+        rotateLabel: true,
+        rotateAngle: 30
+      },
+      yAxis: {
+        gridType: 'dash',
+        dashLength: 4,
+        gridColor: '#EEEEEE',
+        splitNumber: 5,
+        min: minValue,
+        max: maxValue,
+        fontSize: 10,
+        fontColor: '#999999',
+        showTitle: false,
+        disabled: false,
+        format: (val) => {
+          const absVal = Math.abs(val)
+          if (absVal >= 10000) {
+            return (val / 10000).toFixed(1) + 'w'
+          }
+          return val.toFixed(0)
+        }
+      },
+      extra: {
+        column: {
+          type: 'group',
+          width: 20,
+          activeBgColor: '#764ba2',
+          activeBgOpacity: 0.08,
+          linearType: 'none',
+          barBorderCircle: true,
+          seriesGap: 2
         }
-      ]
-    },
-    extra: {
-      column: {
-        type: 'group',
-        width: 20,
-        activeBgColor: '#764ba2',
-        activeBgOpacity: 0.08,
-        linearType: 'custom',
-        linearOpacity: 0.6,
-        barBorderCircle: true,
-        seriesGap: 2
       }
     }
   })
@@ -369,8 +390,10 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
             const value = parseFloat(item.value)
             return isNaN(value) ? 0 : value
           }),
-          linearIndex: 0,
-          color: '#667eea'
+          color: (value) => {
+            // 负数使用红色，正数使用蓝紫色
+            return value < 0 ? '#ef4444' : '#667eea'
+          }
         }
       ]
     }
@@ -426,7 +449,7 @@ function searchSubmit() {
         let formatValue = 'YYYY-MM'
         const today = new Date()
       const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
-      const start = dayjs(end).add(-60, 'months')
+      const start = dayjs(end).add(-24, 'months')
        queryParams.value.startTime =  dayjs(start).format(formatValue)
       queryParams.value.endTime =  dayjs(end).format(formatValue)
       queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -443,7 +466,7 @@ function searchSubmit() {
       let formatValue = 'YYYY-MM'
       const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
-const start = dayjs(end).add(-60, 'months')
+const start = dayjs(end).add(-24, 'months')
        queryParams.value.startTime =  dayjs(start).format(formatValue)
       queryParams.value.endTime =  dayjs(end).format(formatValue)
       queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
@@ -635,13 +658,13 @@ const start = dayjs(end).add(-60, 'months')
   
   .chart-container {
     margin: 16rpx 24rpx 24rpx;
-    padding: 16rpx 16rpx 0;
+    padding: 16rpx;
     background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
     border-radius: 16rpx;
     box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
     width: calc(100% - 48rpx);
-    height: 600rpx;
-    overflow: hidden;
+    height: 850rpx;
+    overflow: visible;
     position: relative;
   }