feat(projects): 添加插件页面：图表

ISSUES CLOSED: \
soybeanjs · May 29, 2022 · 0a46ea0 · 0a46ea0 · vercel · May 29, 2022
1 parent 39854a4
commit 0a46ea0
Show file tree

Hide file tree

Showing 8 changed files with 449 additions and 143 deletions.
diff --git a/mock/model/route.ts b/mock/model/route.ts
@@ -221,6 +221,47 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
             requiresAuth: true,
             icon: 'ic:baseline-local-printshop'
           }
+        },
+        {
+          name: 'plugin_charts',
+          path: '/plugin/charts',
+          component: 'multi',
+          children: [
+            {
+              name: 'plugin_charts_echarts',
+              path: '/plugin/charts/echarts',
+              component: 'self',
+              meta: {
+                title: 'ECharts',
+                requiresAuth: true,
+                icon: 'simple-icons:apacheecharts'
+              }
+            },
+            {
+              name: 'plugin_charts_d3',
+              path: '/plugin/charts/d3',
+              component: 'self',
+              meta: {
+                title: 'D3',
+                requiresAuth: true,
+                icon: 'simple-icons:d3dotjs'
+              }
+            },
+            {
+              name: 'plugin_charts_antv',
+              path: '/plugin/charts/antv',
+              component: 'self',
+              meta: {
+                title: 'AntV',
+                requiresAuth: true,
+                icon: 'ant-design:bar-chart-outlined'
+              }
+            }
+          ],
+          meta: {
+            title: '图表',
+            icon: 'material-symbols:bar-chart-rounded'
+          }
         }
       ],
       meta: {
@@ -592,6 +633,47 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
             requiresAuth: true,
             icon: 'ic:baseline-local-printshop'
           }
+        },
+        {
+          name: 'plugin_charts',
+          path: '/plugin/charts',
+          component: 'multi',
+          children: [
+            {
+              name: 'plugin_charts_echarts',
+              path: '/plugin/charts/echarts',
+              component: 'self',
+              meta: {
+                title: 'ECharts',
+                requiresAuth: true,
+                icon: 'simple-icons:apacheecharts'
+              }
+            },
+            {
+              name: 'plugin_charts_d3',
+              path: '/plugin/charts/d3',
+              component: 'self',
+              meta: {
+                title: 'D3',
+                requiresAuth: true,
+                icon: 'simple-icons:d3dotjs'
+              }
+            },
+            {
+              name: 'plugin_charts_antv',
+              path: '/plugin/charts/antv',
+              component: 'self',
+              meta: {
+                title: 'AntV',
+                requiresAuth: true,
+                icon: 'ant-design:bar-chart-outlined'
+              }
+            }
+          ],
+          meta: {
+            title: '图表',
+            icon: 'material-symbols:bar-chart-rounded'
+          }
         }
       ],
       meta: {

diff --git a/src/hooks/business/useEcharts.ts b/src/hooks/business/useEcharts.ts
@@ -1,8 +1,8 @@
 import { ref, watch, nextTick, onUnmounted, computed } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
 import * as echarts from 'echarts/core';
-import { BarChart, LineChart, PieChart } from 'echarts/charts';
-import type { BarSeriesOption, LineSeriesOption, PieSeriesOption } from 'echarts/charts';
+import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts';
+import type { BarSeriesOption, LineSeriesOption, PieSeriesOption, ScatterSeriesOption } from 'echarts/charts';
 import {
   TitleComponent,
   LegendComponent,
@@ -28,6 +28,7 @@ export type ECOption = echarts.ComposeOption<
   | BarSeriesOption
   | LineSeriesOption
   | PieSeriesOption
+  | ScatterSeriesOption
   | TitleComponentOption
   | LegendComponentOption
   | TooltipComponentOption
@@ -47,6 +48,7 @@ echarts.use([
   BarChart,
   LineChart,
   PieChart,
+  ScatterChart,
   LabelLayout,
   UniversalTransition,
   CanvasRenderer
@@ -55,7 +57,9 @@ echarts.use([
 /**
  * Echarts hooks函数
  * @param options - 图表配置
- * @param renderFun - 图表函数(例如：图表监听函数)
+ * @param darkMode - 暗黑模式
+ * @param renderFun - 图表渲染函数(例如：图表监听函数)
+ * @description 按需引入图表组件，没注册的组件需要先引入
  */
 export default function useEcharts(
   options: Ref<ECOption> | ComputedRef<ECOption>,

diff --git a/src/router/modules/charts.ts b/src/router/modules/charts.ts
@@ -0,0 +1,43 @@
+const charts: AuthRoute.Route = {
+  name: 'plugin_charts',
+  path: '/plugin/charts',
+  component: 'multi',
+  children: [
+    {
+      name: 'plugin_charts_echarts',
+      path: '/plugin/charts/echarts',
+      component: 'self',
+      meta: {
+        title: 'ECharts',
+        requiresAuth: true,
+        icon: 'simple-icons:apacheecharts'
+      }
+    },
+    {
+      name: 'plugin_charts_d3',
+      path: '/plugin/charts/d3',
+      component: 'self',
+      meta: {
+        title: 'D3',
+        requiresAuth: true,
+        icon: 'simple-icons:d3dotjs'
+      }
+    },
+    {
+      name: 'plugin_charts_antv',
+      path: '/plugin/charts/antv',
+      component: 'self',
+      meta: {
+        title: 'AntV',
+        requiresAuth: true,
+        icon: 'ant-design:bar-chart-outlined'
+      }
+    }
+  ],
+  meta: {
+    title: '图表',
+    icon: 'material-symbols:bar-chart-rounded'
+  }
+};
+
+export default charts;
diff --git a/src/typings/route.d.ts b/src/typings/route.d.ts
@@ -36,6 +36,10 @@ declare namespace AuthRoute {
     | 'plugin_icon'
     | 'plugin_print'
     | 'plugin_swiper'
+    | 'plugin_charts'
+    | 'plugin_charts_echarts'
+    | 'plugin_charts_d3'
+    | 'plugin_charts_antv'
     | 'auth-demo'
     | 'auth-demo_permission'
     | 'auth-demo_super'