159 lines
3.3 KiB
Vue
159 lines
3.3 KiB
Vue
<template>
|
|
<div class="nbank-org-section mb-6">
|
|
<div class="flex items-center mb-4">
|
|
<span class="font-bold text-gray-800">非银机构 {{ nbankTotal }}家</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<!-- 饼图 -->
|
|
<div class="h-64">
|
|
<v-chart class="chart-container" :option="pieChartOption" autoresize />
|
|
</div>
|
|
|
|
<!-- 详细列表 -->
|
|
<div class="space-y-2">
|
|
<div
|
|
v-for="(item, index) in detailList"
|
|
:key="index"
|
|
class="flex justify-between items-center text-sm py-1 border-b border-gray-100"
|
|
>
|
|
<span class="text-gray-600">{{ item.label }}</span>
|
|
<span class="text-[#333333] font-bold">{{ item.value }}家</span>
|
|
</div>
|
|
</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 { PieChart } from 'echarts/charts'
|
|
import {
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
LegendComponent
|
|
} from 'echarts/components'
|
|
import { getNBankOrgDetails, FIELD_LABELS } from '../utils/dataParser'
|
|
|
|
// 注册ECharts组件
|
|
use([
|
|
CanvasRenderer,
|
|
PieChart,
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
LegendComponent
|
|
])
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({})
|
|
},
|
|
period: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
// 获取非银机构数详情
|
|
const nbankOrgs = computed(() => getNBankOrgDetails(props.data, props.period))
|
|
|
|
// 计算非银机构总数
|
|
const nbankTotal = computed(() => {
|
|
const orgs = nbankOrgs.value
|
|
return Object.values(orgs).reduce((sum, val) => sum + (val || 0), 0)
|
|
})
|
|
|
|
// 详细列表
|
|
const detailList = computed(() => {
|
|
const orgs = nbankOrgs.value
|
|
const labels = FIELD_LABELS.nbank
|
|
|
|
return Object.entries(orgs)
|
|
.filter(([key, value]) => value > 0)
|
|
.map(([key, value]) => ({
|
|
key,
|
|
label: labels[key] || key,
|
|
value
|
|
}))
|
|
.sort((a, b) => b.value - a.value)
|
|
})
|
|
|
|
// 饼图配置
|
|
const pieChartOption = computed(() => {
|
|
const list = detailList.value
|
|
|
|
if (list.length === 0) {
|
|
return {
|
|
title: {
|
|
text: '暂无数据',
|
|
left: 'center',
|
|
top: 'center',
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 14
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c}家 ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
top: 'middle',
|
|
textStyle: {
|
|
fontSize: 11
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '机构数',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
center: ['60%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 4,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: true,
|
|
formatter: '{b}\n{c}家'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 14,
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
data: list.map(item => ({
|
|
value: item.value,
|
|
name: item.label
|
|
}))
|
|
}
|
|
]
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.nbank-org-section {
|
|
background: #f9fafb;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|
|
|
|
|