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

ISSUES CLOSED: \

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: {

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 { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts';
-import type { BarSeriesOption, LineSeriesOption, PieSeriesOption } 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>,

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;

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'

src/views/dashboard/analysis/components/TopChart/index.vue

@@ -39,152 +39,148 @@ const theme = useThemeStore();
 
 const darkMode = computed(() => theme.darkMode);
 
-const { domRef: lineRef } = useEcharts(
+const lineOptions = ref<ECOption>({
-  ref<ECOption>({
+  tooltip: {
-    tooltip: {
+    trigger: 'axis',
-      trigger: 'axis',
+    axisPointer: {
-      axisPointer: {
+      type: 'cross',
-        type: 'cross',
+      label: {
-        label: {
+        backgroundColor: '#6a7985'
-          backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    data: ['下载量', '注册数']
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value'
+    }
+  ],
+  series: [
+    {
+      color: '#8e9dff',
+      name: '下载量',
+      type: 'line',
+      smooth: true,
+      stack: 'Total',
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0.25,
+              color: '#8e9dff'
+            },
+            {
+              offset: 1,
+              color: '#fff'
+            }
+          ]
         }
-      }
-    },
-    legend: {
-      data: ['下载量', '注册数']
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
-    },
-    xAxis: [
-      {
-        type: 'category',
-        boundaryGap: false,
-        data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value'
-      }
-    ],
-    series: [
-      {
-        color: '#8e9dff',
-        name: '下载量',
-        type: 'line',
-        smooth: true,
-        stack: 'Total',
-        areaStyle: {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0.25,
-                color: '#8e9dff'
-              },
-              {
-                offset: 1,
-                color: '#fff'
-              }
-            ]
-          }
-        },
-        emphasis: {
-          focus: 'series'
-        },
-        data: [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311]
       },
-      {
+      emphasis: {
-        color: '#26deca',
+        focus: 'series'
-        name: '注册数',
+      },
-        type: 'line',
+      data: [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311]
-        smooth: true,
+    },
-        stack: 'Total',
+    {
-        areaStyle: {
+      color: '#26deca',
-          color: {
+      name: '注册数',
-            type: 'linear',
+      type: 'line',
-            x: 0,
+      smooth: true,
-            y: 0,
+      stack: 'Total',
-            x2: 0,
+      areaStyle: {
-            y2: 1,
+        color: {
-            colorStops: [
+          type: 'linear',
-              {
+          x: 0,
-                offset: 0.25,
+          y: 0,
-                color: '#26deca'
+          x2: 0,
-              },
+          y2: 1,
-              {
+          colorStops: [
-                offset: 1,
+            {
-                color: '#fff'
+              offset: 0.25,
-              }
+              color: '#26deca'
-            ]
+            },
-          }
+            {
-        },
+              offset: 1,
-        emphasis: {
+              color: '#fff'
-          focus: 'series'
+            }
-        },
+          ]
-        data: [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
+        }
-      }
+      },
-    ]
+      emphasis: {
-  }),
+        focus: 'series'
-  darkMode
+      },
-);
+      data: [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
+    }
+  ]
+});
+const { domRef: lineRef } = useEcharts(lineOptions, darkMode);
 
-const { domRef: pieRef } = useEcharts(
+const pieOptions = ref<ECOption>({
-  ref<ECOption>({
+  tooltip: {
-    tooltip: {
+    trigger: 'item'
-      trigger: 'item'
+  },
-    },
+  legend: {
-    legend: {
+    bottom: '1%',
-      bottom: '1%',
+    left: 'center',
-      left: 'center',
+    itemStyle: {
+      borderWidth: 0
+    }
+  },
+  series: [
+    {
+      color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
+      name: '时间安排',
+      type: 'pie',
+      radius: ['45%', '75%'],
+      avoidLabelOverlap: false,
       itemStyle: {
-        borderWidth: 0
+        borderRadius: 10,
-      }
+        borderColor: '#fff',
-    },
+        borderWidth: 1
-    series: [
+      },
-      {
+      label: {
-        color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
+        show: false,
-        name: '时间安排',
+        position: 'center'
-        type: 'pie',
+      },
-        radius: ['45%', '75%'],
+      emphasis: {
-        avoidLabelOverlap: false,
-        itemStyle: {
-          borderRadius: 10,
-          borderColor: '#fff',
-          borderWidth: 1
-        },
         label: {
-          show: false,
+          show: true,
-          position: 'center'
+          fontSize: '12'
-        },
+        }
-        emphasis: {
+      },
-          label: {
+      labelLine: {
-            show: true,
+        show: false
-            fontSize: '12'
+      },
-          }
+      data: [
-        },
+        { value: 20, name: '学习' },
-        labelLine: {
+        { value: 10, name: '娱乐' },
-          show: false
+        { value: 30, name: '工作' },
-        },
+        { value: 40, name: '休息' }
-        data: [
+      ]
-          { value: 20, name: '学习' },
+    }
-          { value: 10, name: '娱乐' },
+  ]
-          { value: 30, name: '工作' },
+});
-          { value: 40, name: '休息' }
+const { domRef: pieRef } = useEcharts(pieOptions, darkMode);
-        ]
-      }
-    ]
-  }),
-  darkMode
-);
 </script>
 
 <style scoped></style>

src/views/plugin/charts/antv/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h3>antv</h3>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/plugin/charts/d3/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h3>d3</h3>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/plugin/charts/echarts/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <n-space :vertical="true" :size="16">
+    <n-card :bordered="false" class="rounded-16px shadow-sm">
+      <div ref="pieRef" class="h-400px"></div>
+    </n-card>
+    <n-card :bordered="false" class="rounded-16px shadow-sm">
+      <div ref="lineRef" class="h-400px"></div>
+    </n-card>
+    <n-card :bordered="false" class="rounded-16px shadow-sm">
+      <div ref="barRef" class="h-400px"></div>
+    </n-card>
+    <n-card :bordered="false" class="rounded-16px shadow-sm">
+      <div ref="scatterRef" class="h-400px"></div>
+    </n-card>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useThemeStore } from '@/store';
+import { useEcharts, type ECOption } from '@/hooks';
+
+const theme = useThemeStore();
+
+const darkMode = computed(() => theme.darkMode);
+
+const pieOptions = ref<ECOption>({
+  legend: {},
+  toolbox: {
+    show: true,
+    feature: {
+      mark: { show: true },
+      dataView: { show: true, readOnly: false },
+      restore: { show: true },
+      saveAsImage: { show: true }
+    }
+  },
+  series: [
+    {
+      name: 'Nightingale Chart',
+      type: 'pie',
+      radius: [50, 150],
+      center: ['50%', '50%'],
+      roseType: 'area',
+      itemStyle: {
+        borderRadius: 8
+      },
+      data: [
+        { value: 40, name: 'rose 1' },
+        { value: 38, name: 'rose 2' },
+        { value: 32, name: 'rose 3' },
+        { value: 30, name: 'rose 4' },
+        { value: 28, name: 'rose 5' },
+        { value: 26, name: 'rose 6' },
+        { value: 22, name: 'rose 7' },
+        { value: 18, name: 'rose 8' }
+      ]
+    }
+  ]
+});
+const { domRef: pieRef } = useEcharts(pieOptions, darkMode);
+
+const lineOptions = ref<ECOption>({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      type: 'line',
+      smooth: true
+    }
+  ]
+});
+const { domRef: lineRef } = useEcharts(lineOptions, darkMode);
+
+const barOptions = ref<ECOption>({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      data: [120, 200, 150, 80, 70, 110, 130],
+      type: 'bar',
+      showBackground: true,
+      backgroundStyle: {
+        color: 'rgba(180, 180, 180, 0.2)'
+      }
+    }
+  ]
+});
+const { domRef: barRef } = useEcharts(barOptions, darkMode);
+
+const scatterOptions = ref<ECOption>({
+  tooltip: {},
+  xAxis: {},
+  yAxis: {},
+  series: [
+    {
+      symbolSize: 20,
+      data: [
+        [10.0, 8.04],
+        [8.07, 6.95],
+        [13.0, 7.58],
+        [9.05, 8.81],
+        [11.0, 8.33],
+        [14.0, 7.66],
+        [13.4, 6.81],
+        [10.0, 6.33],
+        [14.0, 8.96],
+        [12.5, 6.82],
+        [9.15, 7.2],
+        [11.5, 7.2],
+        [3.03, 4.23],
+        [12.2, 7.83],
+        [2.02, 4.47],
+        [1.05, 3.33],
+        [4.05, 4.96],
+        [6.03, 7.24],
+        [12.0, 6.26],
+        [12.0, 8.84],
+        [7.08, 5.82],
+        [5.02, 5.68]
+      ],
+      type: 'scatter'
+    }
+  ]
+});
+
+const { domRef: scatterRef } = useEcharts(scatterOptions, darkMode);
+</script>
+
+<style scoped></style>