新增两组件

2025-12-18 15:36:43 +08:00
parent 391d34cc10
commit e6ae3c4a28
28 changed files with 3425 additions and 154 deletions
--- a/src/ui/JRZQ3C9R/components/InsufficientRatioSection.vue
+++ b/src/ui/JRZQ3C9R/components/InsufficientRatioSection.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="card rounded-lg border border-gray-200 mb-2">
+    <div class="mt-4">
+      <LTitle title="余额不足导致还款失败占比" />
+      <div class="h-64 px-2">
+        <v-chart class="chart-container" :option="chartOption" autoresize />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent } from 'echarts/components'
+import LTitle from '@/components/LTitle.vue'
+import { PERIODS, getInsufficientRatioByPeriod } from '../utils/dataParser'
+
+use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+})
+
+const chartOption = computed(() => {
+  const ratio = getInsufficientRatioByPeriod(props.data || {})
+  const labels = PERIODS.map(p => p.label)
+  const values = PERIODS.map(p => (ratio[p.key] || 0) * 100)
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter(params) {
+        const p = params[0]
+        return `${p.name}<br/>余额不足失败占比：${p.value.toFixed(2)}%`
+      }
+    },
+    grid: {
+      left: '6%',
+      right: '6%',
+      top: 20,
+      bottom: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: {
+        fontSize: 10,
+        color: '#6b7280'
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        fontSize: 11,
+        color: '#6b7280',
+        formatter: '{value}%'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f3f4f6'
+        }
+      }
+    },
+    series: [
+      {
+        name: '余额不足失败占比',
+        type: 'bar',
+        data: values,
+        barWidth: '30%',
+        barMinHeight: 3,
+        itemStyle: {
+          color: '#F97316',
+          borderRadius: [4, 4, 0, 0]
+        }
+      }
+    ]
+  }
+})
+</script>
+
+<style scoped>
+.card {
+  background: #ffffff;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+