首页图标中心数据实现

yudao-ui/yudao-ui-admin-vue3/src/views/Home/Index.vue

@@ -74,7 +74,7 @@
 
       <div class="top top_2">
         <div>
-          <PieChart :data="homeInfoKhxzdjzbqk" :total="200" tooltipTip="客户性质等级占比情况" />
+          <PieChart :data="homeInfoKhxzdjzbqk" :total="homeInfoKhxzdjzbqkTotal" tooltipTip="客户性质等级占比情况" />
         </div>
         <div>
           <BarChart_1
@@ -87,13 +87,13 @@
       </div>
       <div class="top top_3">
         <div>
-          <PieChart :data="homeInfoKhbffszbqk" :total="200" tooltipTip="客户拜访方式占比情况" />
+          <PieChart :data="homeInfoKhbffszbqk" :total="homeInfoKhbffszbqkTotal" tooltipTip="客户拜访方式占比情况" />
         </div>
         <div>
-          <PieChart :data="homeInfoKhbmzbqk" :total="200" tooltipTip="客户部门占比情况" />
+          <PieChart :data="homeInfoKhbmzbqk" :total="homeInfoKhbmzbqkTotal" tooltipTip="客户部门占比情况" />
         </div>
         <div>
-          <PieChart :data="homeInfoKhbflxzbqk" :total="200" tooltipTip="客户拜访类型占比情况" />
+          <PieChart :data="homeInfoKhbflxzbqk" :total="homeInfoKhbflxzbqkTotal" tooltipTip="客户拜访类型占比情况" />
         </div>
       </div>
       <BarChart_1
@@ -190,6 +190,11 @@ const homeInfoKhbflxzbqk: Ref<any | null> = ref([])
 const homeInfoBfcplxzbqk: Ref<any | null> = ref([])
 const homeInfoBfztjVal = ref('拜访周统计')
 const homeInfoBfrtjVal = ref('拜访日统计')
+
+const homeInfoKhxzdjzbqkTotal: Ref<any | null> = ref('')
+const homeInfoKhbflxzbqkTotal: Ref<any | null> = ref('')
+const homeInfoKhbmzbqkTotal: Ref<any | null> = ref('')
+const homeInfoKhbffszbqkTotal: Ref<any | null> = ref('')
 // 获取图表数据
 const getEcharts = async () => {
   error.value = ''
@@ -233,6 +238,7 @@ const getEcharts = async () => {
             item.name = `${item.name}   ${allNumVal}   ${ratio}`
           })
         }
+        homeInfoKhxzdjzbqkTotal.value=res.total
         homeInfoKhxzdjzbqk.value = res.list
         console.log('客户性质等级占比:', res.list)
       }),
@@ -257,6 +263,7 @@ const getEcharts = async () => {
             item.name = `${item.name}   ${allNumVal}   ${ratio}`
           })
         }
+        homeInfoKhbffszbqkTotal.value=res.total
         homeInfoKhbffszbqk.value = res.list
         console.log('客户拜访方式占比:', res)
       }),
@@ -276,6 +283,7 @@ const getEcharts = async () => {
             item.name = `${item.name}   ${allNumVal}   ${ratio}`
           })
         }
+        homeInfoKhbmzbqkTotal.value=res.total
         homeInfoKhbmzbqk.value = res.list
         console.log('客户部门占比:', res)
       }),
@@ -295,6 +303,7 @@ const getEcharts = async () => {
             item.name = `${item.name}   ${allNumVal}   ${ratio}`
           })
         }
+        homeInfoKhbflxzbqkTotal.value=res.total
         homeInfoKhbflxzbqk.value = res.list
         console.log('客户拜访类型占比:', res)
       }),

yudao-ui/yudao-ui-admin-vue3/src/views/Home/components/PieChart.vue

 <template>
   <div class="visit-way-pie-chart">
-    <h3 class="chart-title">{{props.tooltipTip}}</h3>
+    <h3 class="chart-title">{{ props.tooltipTip }}</h3>
     <chartsCard
       :option="chartOption"
       :width="width"
@@ -11,25 +11,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import chartsCard from './chartsCard.vue'
 
 const props = defineProps({
   data: {
     type: Array,
     required: true
-    // 数据格式示例：
-    // [
-    //   { name: '电话', value: 765, color: '#5793f3' },
-    //   { name: '上门', value: 560, color: '#a9d672' },
-    //   { name: '社交网络', value: 400, color: '#fac858' },
-    //   { name: '推广渠道', value: 200, color: '#f96c6a' },
-    //   { name: '其他', value: 120, color: '#c2a6f2' },
-    // ]
   },
   total: {
     type: Number,
-    required: true // 总拜访量
+    required: true
   },
   width: {
     type: String,
@@ -41,27 +33,53 @@ const props = defineProps({
   },
   tooltipTip: {
     type: String,
-    default: '拜访方式支持自定义类型添加' // 提示框内容
+    default: '拜访方式支持自定义类型添加'
   }
 })
 
 const chartOption = computed(() => {
-  // console.log(props.data,"props.data");
-
   const legendData = props.data.map((item) => item.name)
   return {
+    graphic: {
+      type: 'group',
+      bounding: 'raw',
+      left: '30%',
+      top: '46%',
+      z: 100,
+      children: [
+        {
+          type: 'text',
+          left: 'center',
+          top: 'middle',
+          style: {
+            text: '总拜访量',
+            textAlign: 'center',
+            fill: '#666',
+            fontSize: 14
+          }
+        },
+        {
+          type: 'text',
+          left: 'center',
+          top: 20,
+          style: {
+            text: `${props.total}`,
+            textAlign: 'center',
+            fill: '#000',
+            fontSize: 20,
+            fontWeight: 'bold'
+          }
+        }
+      ]
+    },
     tooltip: {
       trigger: 'item',
-      formatter: '{a} <br/>{b} : {c} ({d}%)',
-      // 自定义提示框浮层样式
       extraCssText: 'background: #fff9cc; border: 1px solid #ffe57f; padding: 8px;',
-      // 提示框位置
       position: (point) => {
         const x = point[0] > 300 ? point[0] - 100 : point[0]
         const y = point[1] < 100 ? point[1] + 20 : point[1]
         return [x, y]
       },
-      // 提示框内容追加说明
       formatter: (params) => {
         const baseInfo = `${params.seriesName} <br/>${params.marker} ${params.name} : ${params.value} (${params.percent}%)`
         return `${baseInfo} <br/><span style="color: #999; font-size: 12px;">${props.tooltipTip}</span>`
@@ -72,7 +90,7 @@ const chartOption = computed(() => {
       right: 10,
       top: 'center',
       align: 'left',
-      icon: 'circle', // 图例标记为圆形
+      icon: 'circle',
       itemWidth: 12,
       itemHeight: 12,
       itemGap: 15,
@@ -86,44 +104,25 @@ const chartOption = computed(() => {
       {
         name: props.tooltipTip,
         type: 'pie',
-        radius: ['40%', '70%'], // 环形图内外半径
-        center: ['30%', '50%'], // 图表中心位置，留出右侧图例空间
+        radius: ['40%', '70%'],
+        center: ['30%', '50%'],
         label: {
-          show: false // 隐藏饼图扇区默认标签
+          show: false
         },
         labelLine: {
-          show: false // 隐藏标签连线
+          show: false
         },
-        data: props.data.map((item:any) => ({
+        data: props.data.map((item: any) => ({
           name: item.name,
           value: item.value,
           itemStyle: {
             color: item.color
           }
         })),
-        // 中心文字配置
         emphasis: {
           label: {
             show: false
           }
-        },
-        // 中心显示总拜访量
-        renderItem: (params, api) => {
-          if (params.name === '') {
-            return {
-              type: 'text',
-              position: api.coord([api.value(0), api.value(1)]),
-              content: `总拜访量\n${props.total}`,
-              style: {
-                textAlign: 'center',
-                fill: '#333',
-                fontSize: 16,
-                fontWeight: 'bold',
-                lineHeight: 1.4
-              }
-            }
-          }
-          return null
         }
       }
     ]
@@ -131,7 +130,7 @@ const chartOption = computed(() => {
 })
 
 const handleChartReady = (chart: echarts.ECharts) => {
-  // 可在此处对图表进行更多自定义操作，如监听事件等
+  // 可扩展事件或动画效果
 }
 </script>