137 lines
2.9 KiB
Vue
137 lines
2.9 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, LegendComponent, TooltipComponent } from 'echarts/components'
|
|
import LTitle from '@/components/LTitle.vue'
|
|
import { PERIODS, getQueryCountsByPeriod } from '../utils/dataParser'
|
|
|
|
use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
|
|
const chartOption = computed(() => {
|
|
const counts = getQueryCountsByPeriod(props.data || {})
|
|
const labels = PERIODS.map(p => p.label)
|
|
|
|
const bankData = PERIODS.map(p => counts[p.key]?.bank || 0)
|
|
const finData = PERIODS.map(p => counts[p.key]?.nbankFin || 0)
|
|
const otherData = PERIODS.map(p => counts[p.key]?.nbankOther || 0)
|
|
|
|
return {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' }
|
|
},
|
|
legend: {
|
|
top: 0,
|
|
icon: 'circle',
|
|
textStyle: {
|
|
fontSize: 11,
|
|
color: '#4b5563'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
top: 24,
|
|
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: bankData,
|
|
barWidth: '25%',
|
|
barMinHeight: 3,
|
|
itemStyle: {
|
|
color: '#2B79EE',
|
|
borderRadius: [4, 4, 0, 0]
|
|
}
|
|
},
|
|
{
|
|
name: '消费金融查验次数',
|
|
type: 'bar',
|
|
data: finData,
|
|
barWidth: '25%',
|
|
barMinHeight: 3,
|
|
itemStyle: {
|
|
color: '#60A5FA',
|
|
borderRadius: [4, 4, 0, 0]
|
|
}
|
|
},
|
|
{
|
|
name: '其他机构查验次数',
|
|
type: 'bar',
|
|
data: otherData,
|
|
barWidth: '25%',
|
|
barMinHeight: 3,
|
|
itemStyle: {
|
|
color: '#A855F7',
|
|
borderRadius: [4, 4, 0, 0]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
|