108 lines
2.2 KiB
Vue
108 lines
2.2 KiB
Vue
<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>
|
|
|
|
|