182 lines
4.0 KiB
Vue
182 lines
4.0 KiB
Vue
<template>
|
||
<div class="mb-6">
|
||
<LTitle title="非银机构申请机构数分布" />
|
||
<div class="mt-4">
|
||
<!-- 饼图：宽度占满 -->
|
||
<div class="h-64 mb-4">
|
||
<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">
|
||
<div class="flex items-center">
|
||
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
|
||
<span class="text-gray-600">{{ item.label }}</span>
|
||
</div>
|
||
<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 LTitle from '@/components/LTitle.vue'
|
||
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
|
||
},
|
||
// 维度：id（身份证） / cell（手机号）
|
||
dimension: {
|
||
type: String,
|
||
default: 'id'
|
||
}
|
||
})
|
||
|
||
// 颜色映射表（与图表保持一致）
|
||
const COLORS = [
|
||
'#2B79EE',
|
||
'#61D2F4',
|
||
'#34D399',
|
||
'#FBBF24',
|
||
'#F97316',
|
||
'#EF4444',
|
||
'#A855F7',
|
||
'#6B7280',
|
||
]
|
||
|
||
// 获取非银机构数详情
|
||
const nbankOrgs = computed(() =>
|
||
getNBankOrgDetails(props.data, props.period, props.dimension)
|
||
)
|
||
|
||
// 计算非银机构总数
|
||
const nbankTotal = computed(() => {
|
||
const orgs = nbankOrgs.value
|
||
return Object.values(orgs).reduce((sum, val) => sum + (val || 0), 0)
|
||
})
|
||
|
||
// 详细列表（包含所有项，包含 0 家）
|
||
const detailList = computed(() => {
|
||
const orgs = nbankOrgs.value
|
||
const labels = FIELD_LABELS.nbank
|
||
|
||
return Object.entries(orgs)
|
||
.map(([key, value], index) => ({
|
||
key,
|
||
label: labels[key] || key,
|
||
value: value || 0,
|
||
color: COLORS[index % COLORS.length],
|
||
}))
|
||
})
|
||
|
||
// 饼图配置
|
||
const pieChartOption = computed(() => {
|
||
const list = detailList.value
|
||
|
||
if (!list || list.length === 0) {
|
||
return {
|
||
title: {
|
||
text: '暂无数据',
|
||
left: 'center',
|
||
top: 'center',
|
||
textStyle: {
|
||
color: '#999',
|
||
fontSize: 14
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
return {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}: {c}家 ({d}%)'
|
||
},
|
||
graphic: {
|
||
type: 'text',
|
||
left: 'center',
|
||
top: 'center',
|
||
style: {
|
||
text: '非银机构',
|
||
fill: '#111827',
|
||
fontSize: 14,
|
||
fontWeight: 'bold',
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '机构数',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ['50%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 4,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
},
|
||
label: {
|
||
show: true,
|
||
fontSize: 14,
|
||
fontWeight: 'bold',
|
||
color: '#333'
|
||
}
|
||
},
|
||
data: list.map(item => ({
|
||
value: item.value,
|
||
name: item.label,
|
||
itemStyle: {
|
||
color: item.color
|
||
}
|
||
}))
|
||
}
|
||
]
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|