From e3217bbf2bab861884b338c97f74bd8d70127c83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=AA=E5=B0=91=E4=BC=9F?= <wsw.sun@qq.com>
Date: Fri, 14 Mar 2025 18:05:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=80=E5=8F=91=E8=80=85=E7=A4=BE?=
 =?UTF-8?q?=E5=8C=BA=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Jyh/Version/Detail/CommunityInfo.vue      | 85 ++++++++++++++++++-
 src/views/Jyh/Version/Detail/index.vue        |  6 +-
 2 files changed, 87 insertions(+), 4 deletions(-)

diff --git a/src/views/Jyh/Version/Detail/CommunityInfo.vue b/src/views/Jyh/Version/Detail/CommunityInfo.vue
index 87602d5..222c276 100644
--- a/src/views/Jyh/Version/Detail/CommunityInfo.vue
+++ b/src/views/Jyh/Version/Detail/CommunityInfo.vue
@@ -16,7 +16,7 @@
           <span class="card-val">950808-1</span>
         </d-col>
       </d-row>
-      <d-row>
+      <d-row class="mb-3">
         <d-col :span="24">
           <div class="flex">
             <span class="card-key width-90 flex-shrink-0">社区描述</span>
@@ -33,16 +33,95 @@
       <p class="card-desc">有关Pull Request创建者的公司信息和地区分布(使用公共GitHub信息进行分析)</p>
       <d-row class="mt-3">
         <d-col :span="12">
-          <p>国家/地球分布</p>
+          <d-chart :option="optionConChart" style="width: 100%; height: 400px"></d-chart>
+          <p class="text-center mb-3">国家/地球分布</p>
         </d-col>
         <d-col :span="12">
-          <p>组织/公司分布</p>
+          <d-chart :option="optionOrgChart" style="width: 100%; height: 400px"></d-chart>
+          <p class="text-center mb-3">组织/公司分布</p>
         </d-col>
       </d-row>
     </Card>
   </div>
 </template>
 
+<script setup>
+import { ref, reactive } from 'vue';
+import { DChart } from 'vue-devui/echarts';
+
+const optionConChart = reactive({
+  tooltip: {
+    show: true,
+    trigger: 'item'
+  },
+  xAxis: {
+    type: 'category',
+    data: ['美国', '中国', '德国', '瑞士', '法国', '英国', '印度', '日本', '荷兰', '俄罗斯']
+  },
+  yAxis: {
+    // 给y轴添加单位后缀
+    axisLabel: {
+      formatter: '{value}%'
+    },
+    name: '单位',
+    type: 'value'
+  },
+  series: [
+    {
+      data: [12, 14.8, 23.6, 18.6, 17.3, 13.1, 16, 11.8, 13.9, 16.4],
+      type: 'bar',
+      barWidth: '40%',
+      // 给label添加单位后缀
+      label: {
+        show: true,
+        position: 'top',
+        formatter: '{c}%'
+      },
+      itemStyle: {
+        color: '#2070F3',
+        borderRadius: [5, 5, 0, 0]
+      }
+    }
+  ]
+});
+
+const optionOrgChart = reactive({
+  tooltip: {
+    show: true,
+    trigger: 'item'
+  },
+  xAxis: {
+    type: 'category',
+    data: ['公司1', '公司2', '公司3', '公司4', '公司5', '公司6', '公司7', '公司8', '公司9', '公司10']
+  },
+  yAxis: {
+    // 给y轴添加单位后缀
+    axisLabel: {
+      formatter: '{value}%'
+    },
+    name: '单位',
+    type: 'value'
+  },
+  series: [
+    {
+      data: [12, 14.8, 23.6, 18.6, 17.3, 13.1, 16, 11.8, 13.9, 16.4],
+      type: 'bar',
+      barWidth: '40%',
+      // 给label添加单位后缀
+      label: {
+        show: true,
+        position: 'top',
+        formatter: '{c}%'
+      },
+      itemStyle: {
+        color: '#2CB8C9',
+        borderRadius: [5, 5, 0, 0]
+      }
+    }
+  ]
+});
+</script>
+
 <style scoped lang="scss">
 .card-desc {
   font-size: 12px;
diff --git a/src/views/Jyh/Version/Detail/index.vue b/src/views/Jyh/Version/Detail/index.vue
index 1804037..3b9eb15 100644
--- a/src/views/Jyh/Version/Detail/index.vue
+++ b/src/views/Jyh/Version/Detail/index.vue
@@ -145,7 +145,10 @@ const signCla = (row: any) => {
     top: 0;
   }
 }
-
+.split {
+  height: 60%;
+  background-color: #ddd;
+}
 .error {
   color: $devui-contrast;
 }
@@ -232,6 +235,7 @@ const signCla = (row: any) => {
   }
   .header-div {
     display: flex;
+    align-items: center;
     height: 20px;
     margin-bottom: 12px;
     .span1 {