feat: 柱状图组件封装

src/views/Jyh/Version/Detail/CommunityInfo.vue

@@ -31,95 +31,15 @@
     <Card simple class="jyh-card mb-4">
       <div class="card-title">贡献者分布</div>
       <p class="card-desc">有关Pull Request创建者的公司信息和地区分布(使用公共GitHub信息进行分析)</p>
-      <d-row class="mt-3">
-        <d-col :span="12">
-          <d-chart :option="optionConChart" style="width: 100%; height: 400px"></d-chart>
-          <p class="text-center mt-translate-y">国家/地球分布</p>
-        </d-col>
-        <d-col :span="12">
-          <d-chart :option="optionOrgChart" style="width: 100%; height: 400px"></d-chart>
-          <p class="text-center mt-translate-y">组织/公司分布</p>
-        </d-col>
-      </d-row>
+      <div class="mt-3">
+        <chart-line />
+      </div>
     </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]
-      }
-    }
-  ]
-});
+import ChartLine from '@/components/ChartLine/index.vue';
 </script>
 
 <style scoped lang="scss">
@@ -127,7 +47,4 @@ const optionOrgChart = reactive({
   font-size: 12px;
   color: #808080;
 }
-.mt-translate-y {
-  transform: translateY(-30px);
-}
 </style>