From de42648740d56a186dc0d464863cfff5137c88d4 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 27 Apr 2023 09:18:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8Fbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/bigscreen/dv/AppQxnDv.vue            | 89 +++++++++++--------
 .../bigscreen/dv/components/DoughnutChart.vue |  2 +-
 2 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/packages/bigscreen/dv/AppQxnDv.vue b/packages/bigscreen/dv/AppQxnDv.vue
index 473b1371..a6d22e06 100644
--- a/packages/bigscreen/dv/AppQxnDv.vue
+++ b/packages/bigscreen/dv/AppQxnDv.vue
@@ -259,16 +259,16 @@
               <h2>各单位群主及群分布</h2>
             </div>
             <ai-echart-v2
-              style="height: 210px; width: 100%;"
+              style="height: 230px; width: 100%; margin-top: 10px;"
               :ref="'chart5'"
-              :data="wxGroupOverview['各单位群主及群分布'] ? wxGroupOverview['各单位群主及群分布'] : []"
+              :data="barChartData"
               :ops="barChart">
             </ai-echart-v2>
           </div>
         </AiDvPanel>
         <AiDvPanel class="bottom" style="" border="border6" title="群动态多维度排行">
           <ai-table
-            height="340px"
+            height="310px"
             :tableData="tableList"
             :col-configs="colConfigs"
             :isShowPagination="false"
@@ -430,11 +430,30 @@
           }
         },
         barChart: {
+          legend: {
+            textStyle: {
+              color: "#fff"
+            }
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '35px',
+            containLabel: true
+          },
           xAxis: {
             type: "category",
             axisTick: {show: false},
             axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
-            axisLabel: {color: '#8FABBF', fontSize: 12},
+            axisLabel: {color: '#8FABBF', fontSize: 10, rotate: 30},
+          },
+          tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(0, 102, 154, 0.65)',
+            borderColor: 'rgba(0, 102, 154, 0.65)',
+            textStyle: { color: '#fff' },
+            axisPointer: { type: 'cross' }
           },
           yAxis: {
             nameGap: 23,
@@ -456,8 +475,8 @@
               y: 0,
               y2: 1,
               colorStops: [
-                { offset: 0, color: 'rgba(51, 204, 204, 1)' },
-                { offset: 1, color: 'rgba(31, 89, 89, 0.25)' }
+                { offset: 1, color: 'rgba(51, 204, 204, 1)' },
+                { offset: 0, color: 'rgba(31, 89, 89, 0.25)' }
               ]
             },
             {
@@ -467,40 +486,24 @@
               y: 0,
               y2: 1,
               colorStops: [
-                { offset: 0, color: 'rgba(219, 179, 110, 0.1)' },
-                { offset: 1, color: 'rgba(219, 179, 110, 1)' }
+                { offset: 1, color: 'rgba(219, 179, 110, 0.1)' },
+                { offset: 0, color: 'rgba(219, 179, 110, 1)' }
               ]
             }
           ],
-          daemon: {
-            type: 'bar',
-            barWidth: 14,
-            barCategoryGap: 40,
-            itemStyle: {}
-          }
+          series: [
+            {
+              name: '居民人数',
+              type: 'bar',
+              barWidth: '15'
+            },
+            {
+              name: '新增居民',
+              barWidth: '15',
+              type: 'bar'
+            }
+          ]
         },
-        barData: [
-          {
-            "name": "兴仁公安局",
-            "v1": 223,
-            "v11": 23
-          },
-          {
-            "name": "兴仁公安局1",
-            "v1": 22,
-            "v11": 29
-          },
-          {
-            "name": "兴仁公安局2",
-            "v1": 67,
-            "v11": 23
-          },
-          {
-            "name": "兴仁公安局3",
-            "v1": 98,
-            "v11": 23
-          }
-        ],
         pieData: [
         { value: 1048, name: 'Search Engine' },
         { value: 735, name: 'Direct' },
@@ -609,6 +612,20 @@
         return Number(((this.wxGroupOverview['活跃群成员数量(7天)'] / (this.wxGroupOverview['群成员数量'] * 7)) * 100).toFixed(2))
       },
 
+      barChartData () {
+        if (!this.wxGroupOverview['各单位群主及群分布']) {
+          return []
+        }
+
+        return this.wxGroupOverview['各单位群主及群分布'].map(v => {
+          return {
+            name: v['网格名称'],
+            '群主数量': v['群主数量'],
+            '群数量': v['群数量']
+          }
+        })
+      },
+
       tableList () {
         const list = this.wxGroupOverview['群动态多维度排行']
         if (!list) {
diff --git a/packages/bigscreen/dv/components/DoughnutChart.vue b/packages/bigscreen/dv/components/DoughnutChart.vue
index bc08f9a8..24ff615c 100644
--- a/packages/bigscreen/dv/components/DoughnutChart.vue
+++ b/packages/bigscreen/dv/components/DoughnutChart.vue
@@ -142,7 +142,7 @@
         }
 
         span {
-          margin-right: 24px;
+          width: 86px;
           font-weight: 400;
           font-size: 14px;
           color: #9BB7D4;