update

src/page/index/components/BusinessStructure/BusinessStructure.vue

@@ -47,6 +47,14 @@ const handleGoMounted = async () => {
 
     myChart = echarts.init(chartDom);
 
+    const rect = chartDom.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+
+    // 计算center位置（20%，50%）对应的实际像素
+    const centerX = width * 0.2;
+    const centerY = height * 0.5;
+
     const option = {
 
         tooltip: {  // 新增 tooltip 配置
@@ -69,8 +77,8 @@ const handleGoMounted = async () => {
                         width: 83,
                         height: 83
                     },
-                    left: 31,
-                    top: 24,
+                    left: centerX - 41.5,
+                    top: centerY - 41.5,
                     z: 10
                 }
             ]

src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import SmallTitle from '../smallTitle/smallTitle.vue'
 import './CustomerAgeGroup.less'
-import { onMounted, onBeforeUnmount } from 'vue';
+import { onMounted, onBeforeUnmount, onUnmounted } from 'vue';
 import * as echarts from 'echarts/core';
 import { BarChart } from 'echarts/charts';
 import {
@@ -31,7 +31,7 @@ const colorList = ['#A8DBFF', '#5DBBFF', '#0094FF', '#005CE5'];
 const categoryList: any = ["25以下", "25-35", "35-45", "45以上"]
 
 onMounted(async () => {
-
+    window.addEventListener('resize', resizeAllCharts)
     const res: any = await handleGetData()
 
     const chartDom = document.getElementById('CustomerAgeGroup');
@@ -219,6 +219,17 @@ const handleGetData = async () => {
     return res
 }
 
+// 重绘所有图表的方法
+const resizeAllCharts = () => {
+    // 获取当前显示的tab下的所有echarts实例
+    const charts = document.querySelectorAll(`#CustomerAgeGroup`)
+    charts.forEach(chart => {
+        const instance = echarts.getInstanceByDom(chart as HTMLElement)
+        if (instance) {
+            instance.resize()
+        }
+    })
+}
 
 const resizeChart = () => {
     myChart?.resize();
@@ -229,6 +240,11 @@ onBeforeUnmount(() => {
     myChart?.dispose();
 });
 
+
+onUnmounted(() => {
+    window.removeEventListener('resize', resizeAllCharts)
+})
+
 </script>
 
 <template>

src/page/index/components/CustomerGroup/CustomerGroup.vue

@@ -12,7 +12,7 @@ import {
     TransformComponent // 如果使用 dataset.source 需要此组件
 } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
-import { onBeforeUnmount, onMounted, watch } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, onUnmounted, watch } from 'vue';
 import { handleGetCustomerGroupRatio } from '../../service';
 import moment from 'moment';
 
@@ -39,6 +39,7 @@ const props = defineProps<{
     currentService?: any;
 }>();
 
+
 // 监听传入的选中服务区
 watch(
     () => props.currentService,
@@ -188,9 +189,21 @@ const resizeChart = () => {
     myChart?.resize();
 };
 
+// 重绘所有图表的方法
+const resizeAllCharts = () => {
+    // 获取当前显示的tab下的所有echarts实例
+    const charts = document.querySelectorAll(`#CustomerGroupBoxContent`)
+    charts.forEach(chart => {
+        const instance = echarts.getInstanceByDom(chart as HTMLElement)
+        if (instance) {
+            instance.resize()
+        }
+    })
+}
+
+
 
 onBeforeUnmount(() => {
-    window.removeEventListener('resize', resizeChart);
     myChart?.dispose();
 });
 

src/page/index/components/DetailedPayment/DetailedPayment.vue

@@ -83,13 +83,10 @@ onMounted(async () => {
                     width: 1,
                     opacity: 0.5
                 },
-                data: res.seriesData,
+                data: [{ value: res.seriesData }],
                 symbol: 'none',
                 itemStyle: {
                     color: '#0289ED'
-                },
-                areaStyle: {
-                    opacity: 0.1
                 }
             }
         ]
@@ -107,7 +104,7 @@ const handleGetSectionFlowCount = async () => {
 
     }
     const data = await handleGetProjectYearlyArrearageList(req)
-    console.log('datadatadatadatadatadata', data);
+    console.log('handleGetProjectYearlyArrearageListhandleGetProjectYearlyArrearageListhandleGetProjectYearlyArrearageList', data);
 
     let category: any = []
     let seriesData: any = []
@@ -123,16 +120,25 @@ const handleGetSectionFlowCount = async () => {
             if (prent > max) {
                 max = prent
             }
-            category.push({ name: item.Account_Name, max: max })
+        })
+
+        list.forEach((item: any) => {
+            let prent: number = Number(((item.Account_Amount > 0 ? item.Payment_Amount / item.Account_Amount : 0) * 100).toFixed(2))
+
+            category.push({ name: `${item.Account_Name}(${prent}%)`, max: max })
             seriesData.push(prent)
             // realData.push(item.data)
         })
     }
 
+    console.log('dsadjashdudftgsagsdfs', seriesData);
+    console.log('dsadjashdudftgsagsdfs', category);
+
     let res: any = {
         category: category,// x轴的内容
         seriesData: seriesData,// y轴的数据
-        realData: realData// 真实数据
+        realData: realData,// 真实数据
+        max: max
     }
     return res
 }

src/page/index/components/ThisMonthBenefits/ThisMonthBenefits.vue

@@ -42,6 +42,13 @@ onMounted(async () => {
 
     const chartDom = document.getElementById('CoreCategory');
     if (!chartDom) return;
+    const rect = chartDom.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+
+    // 计算center位置（20%，50%）对应的实际像素
+    const centerX = width * 0.2;
+    const centerY = height * 0.5;
 
     myChart = echarts.init(chartDom);
 
@@ -85,8 +92,8 @@ onMounted(async () => {
                         width: 83,
                         height: 83
                     },
-                    left: '25',
-                    top: '25',
+                    left: centerX - 41.5,
+                    top: centerY - 41.5,
                     z: 10
                 }
             ]

src/page/index/index.vue

@@ -114,7 +114,7 @@ const handleChangePageTab = (value: number) => {
         </div>
 
         <!-- 分区一 -->
-        <div class="content169" v-show="selectPageTab === 1">
+        <div class="content169" v-if="selectPageTab === 1">
             <div class="content169Left">
                 <!-- 消息轮播框 -->
                 <NoticeListBox :currentService="currentService" />
@@ -155,6 +155,7 @@ const handleChangePageTab = (value: number) => {
                 <!-- 核心经营数据 -->
                 <CoreBusinessData :currentService="currentService" style="position: relative;z-index: 9;" />
 
+
                 <!-- 地图 -->
                 <PageMap @handleGetCurrentService="handleGetCurrentService" />
 
@@ -335,6 +336,7 @@ const handleChangePageTab = (value: number) => {
             </div>
         </div>
 
+
         <!-- 分区三 -->
         <div class="content1693st" v-if="selectPageTab === 3">
             <div class="content1693stItem">
@@ -414,6 +416,7 @@ const handleChangePageTab = (value: number) => {
             </div>
         </div>
 
+
         <!-- 分区四 -->
         <div class="content1694st" v-if="selectPageTab === 4">
             <div class="content1694stItem">
@@ -490,6 +493,7 @@ const handleChangePageTab = (value: number) => {
 
 
 
+
         <template v-if="false">
             <!-- 最初版隐藏 -->
             <div class="content" v-if="pageType === 'center'">