feat: 开发者社区信息

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;

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 {