From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/crm/statistics/portrait/components/PortraitCustomerArea.vue | 147 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 147 insertions(+), 0 deletions(-)
diff --git a/src/views/crm/statistics/portrait/components/PortraitCustomerArea.vue b/src/views/crm/statistics/portrait/components/PortraitCustomerArea.vue
new file mode 100644
index 0000000..513936c
--- /dev/null
+++ b/src/views/crm/statistics/portrait/components/PortraitCustomerArea.vue
@@ -0,0 +1,147 @@
+<!-- 瀹㈡埛鍩庡競鍒嗗竷 -->
+<template>
+ <!-- Echarts鍥� -->
+ <el-card shadow="never">
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-skeleton :loading="loading" animated>
+ <Echart :height="500" :options="echartsOption" />
+ </el-skeleton>
+ </el-col>
+ <el-col :span="12">
+ <el-skeleton :loading="loading" animated>
+ <Echart :height="500" :options="echartsOption2" />
+ </el-skeleton>
+ </el-col>
+ </el-row>
+ </el-card>
+</template>
+<script lang="ts" setup>
+import { EChartsOption } from 'echarts'
+import china from '@/assets/map/json/china.json'
+import echarts from '@/plugins/echarts'
+import {
+ CrmStatisticCustomerAreaRespVO,
+ StatisticsPortraitApi
+} from '@/api/crm/statistics/portrait'
+import { areaReplace } from '@/utils'
+
+defineOptions({ name: 'PortraitCustomerArea' })
+const props = defineProps<{ queryParams: any }>() // 鎼滅储鍙傛暟
+
+// 娉ㄥ唽鍦板浘
+echarts?.registerMap('china', china as any)
+
+const loading = ref(false) // 鍔犺浇涓�
+const areaStatisticsList = ref<CrmStatisticCustomerAreaRespVO[]>([]) // 鍒楄〃鐨勬暟鎹�
+
+/** 鍦板浘閰嶇疆锛堝叏閮ㄥ鎴凤級 */
+const echartsOption = reactive<EChartsOption>({
+ title: {
+ text: '鍏ㄩ儴瀹㈡埛',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ showDelay: 0,
+ transitionDuration: 0.2
+ },
+ visualMap: {
+ text: ['楂�', '浣�'],
+ realtime: false,
+ calculable: true,
+ top: 'middle',
+ inRange: {
+ color: ['#fff', '#3b82f6']
+ }
+ },
+ series: [
+ {
+ name: '瀹㈡埛鍦板煙鍒嗗竷',
+ type: 'map',
+ map: 'china',
+ roam: false,
+ selectedMode: false,
+ data: []
+ }
+ ]
+}) as EChartsOption
+
+/** 鍦板浘閰嶇疆锛堟垚浜ゅ鎴凤級 */
+const echartsOption2 = reactive<EChartsOption>({
+ title: {
+ text: '鎴愪氦瀹㈡埛',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ showDelay: 0,
+ transitionDuration: 0.2
+ },
+ visualMap: {
+ text: ['楂�', '浣�'],
+ realtime: false,
+ calculable: true,
+ top: 'middle',
+ inRange: {
+ color: ['#fff', '#3b82f6']
+ }
+ },
+ series: [
+ {
+ name: '瀹㈡埛鍦板煙鍒嗗竷',
+ type: 'map',
+ map: 'china',
+ roam: false,
+ selectedMode: false,
+ data: []
+ }
+ ]
+}) as EChartsOption
+
+/** 鑾峰彇缁熻鏁版嵁 */
+const loadData = async () => {
+ // 1. 鍔犺浇缁熻鏁版嵁
+ loading.value = true
+ const areaList = await StatisticsPortraitApi.getCustomerArea(props.queryParams)
+ areaStatisticsList.value = areaList.map((item: CrmStatisticCustomerAreaRespVO) => {
+ return {
+ ...item,
+ areaName: areaReplace(item.areaName)
+ }
+ })
+ buildLeftMap()
+ buildRightMap()
+ loading.value = false
+}
+defineExpose({ loadData })
+
+const buildLeftMap = () => {
+ let min = 0
+ let max = 0
+ echartsOption.series![0].data = areaStatisticsList.value.map((item) => {
+ min = Math.min(min, item.customerCount || 0)
+ max = Math.max(max, item.customerCount || 0)
+ return { ...item, name: item.areaName, value: item.customerCount || 0 }
+ })
+ echartsOption.visualMap!['min'] = min
+ echartsOption.visualMap!['max'] = max
+}
+
+const buildRightMap = () => {
+ let min = 0
+ let max = 0
+ echartsOption2.series![0].data = areaStatisticsList.value.map((item) => {
+ min = Math.min(min, item.dealCount || 0)
+ max = Math.max(max, item.dealCount || 0)
+ return { ...item, name: item.areaName, value: item.dealCount || 0 }
+ })
+ echartsOption2.visualMap!['min'] = min
+ echartsOption2.visualMap!['max'] = max
+}
+
+/** 鍒濆鍖� */
+onMounted(() => {
+ loadData()
+})
+</script>
--
Gitblit v1.8.0