feat: 柱状图组件封装

2025-03-15 15:40:06 +08:00
parent 34c515b3e7
commit 85ceb0fded
3 changed files with 118 additions and 99 deletions
--- a/src/components/ChartLine/index.vue
+++ b/src/components/ChartLine/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <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>
+</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">
+.mt-translate-y {
+  transform: translateY(-30px);
+}
+</style>
--- a/src/router/interceptor.ts
+++ b/src/router/interceptor.ts
@@ -41,7 +41,7 @@ const isRepoVisited = (id: string): boolean => {
 // };
 const fromHomeWeb = ['home', 'search', 'gStar', 'gStarApply', 'explore'];

-export const injectRouter = router => {
+export const injectRouter = (router) => {
  const account = useAccountStore();

  router.beforeEach(async (to, from) => {
@@ -56,7 +56,7 @@ export const injectRouter = router => {
        path_name: Array.isArray(namespace) ? namespace.join('/') : namespace
      };
      let res = await reqCatch(getPathType, params);
-      if (!res.error) {
+      if (!res.error && res.data) {
        res = res?.data?.data;

        if (res?.type === null) {
@@ -77,15 +77,18 @@ export const injectRouter = router => {
    const BASE_URL = (import.meta as any).env.VITE_HOST;
    const beforeRef = sessionStorage.getItem('ref');
    const ref = beforeRef || document.referrer || '';
-    if (!fromHomeWeb.includes(to.name)) { // 设置全局ref
+    if (!fromHomeWeb.includes(to.name)) {
+      // 设置全局ref
      window.page_ref = ref;
      sessionStorage.setItem('ref', BASE_URL + to.fullPath);
    }

    // 获取组织详情
-    if (to.meta.type === 'org' || globalStore.namespaceType === 1) { // 组织相关页面 || 组织主页
+    if (to.meta.type === 'org' || globalStore.namespaceType === 1) {
+      // 组织相关页面 || 组织主页
      const { orgId } = useOrgId('%2F', to.params.namespace);
-      if (orgId.value !== currentOrgId) { // 第一次进入或切换组织时调用接口
+      if (orgId.value !== currentOrgId) {
+        // 第一次进入或切换组织时调用接口
        const { setOrgInfo, setAccessLevel, setVisibility } = orgInfoStore();
        const res = await reqCatch(getOrg, { orgId: orgId.value, with_full_path: true });
        if (!res.error) {
@@ -94,7 +97,8 @@ export const injectRouter = router => {
        if (res?.error?.error_code === 404) {
          return { name: '404' };
        }
-        if (res?.error?.error_code === 403) { // 403代表无私有组织权限
+        if (res?.error?.error_code === 403) {
+          // 403代表无私有组织权限
          setAccessLevel(0);
          setVisibility('private');
          return { name: '403' };
@@ -137,8 +141,8 @@ export const injectRouter = router => {
            ['DISCUSSION', 'repoDiscussion'],
            ['COMMUNITY', 'reqCommunity']
          ]);
-          modules.forEach(item => {
-            if ((to.name === moduleRouteConfig.get(item.key)) && item.value === '0') {
+          modules.forEach((item) => {
+            if (to.name === moduleRouteConfig.get(item.key) && item.value === '0') {
              globalStore.setIsNotFound(true);
            }
          });
@@ -204,15 +208,18 @@ export const injectRouter = router => {
    }

    // 验证登录权限
-    if (to.meta.needLogin) { // 是否需要登录
-      if (account.isLogin) { // 已登录
+    if (to.meta.needLogin) {
+      // 是否需要登录
+      if (account.isLogin) {
+        // 已登录
        return true;
      } else {
        emitEvent('login', { triggerType: to.meta?.loginType, Authorization: Boolean(to?.meta?.Authorization) });
        return false;
      }
    } else {
-      if (account.isLogin && to.meta.loginHidden) { // 已登录，不能访问某些页面，进行跳转处理（如：登录注册）
+      if (account.isLogin && to.meta.loginHidden) {
+        // 已登录，不能访问某些页面，进行跳转处理（如：登录注册）
        const toOauth = to.name === 'oauth' && /(.*)_(.*)/.exec(to.query?.state); // 三方授权不跳转
        const fromAtomGit = to.query.installation_id && /atomgit.com/.test(document.referrer); // 来自AtomGit应用的跳转
        if (toOauth || fromAtomGit) return true;
@@ -223,7 +230,8 @@ export const injectRouter = router => {
  });
  router.afterEach((to, from) => {
    // 上报PV
-    if (to.fullPath === '/' || to.fullPath !== from.fullPath) { // 同地址切换不上报
+    if (to.fullPath === '/' || to.fullPath !== from.fullPath) {
+      // 同地址切换不上报
      if (!(to.name === 'repo' || to.name === 'repoDir') || (from.fullPath === '/' && to.name === 'repoDir')) {
        // 子应用单独处理
        if (fromHomeWeb.includes(to.name)) return;
--- a/src/views/Jyh/Version/Detail/CommunityInfo.vue
+++ b/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>