dashboard (#6)

* feat(dashboard): 增加dashboard示例

* feat(chart-ui): 增加图表UI组件库

* feat(dashboard): 完善dashboard示例

apps/web-antd/src/views/dashboard/index.vue

@@ -1,7 +1,249 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 defineOptions({ name: 'WelCome' });
+import { Dashboard } from '@vben/universal-ui';
+import { echartsInstance as echarts } from '@vben/chart-ui';
+const cardList = ref([
+  {
+    title: '访问数',
+    extra: '月',
+    leftContent: '2000',
+    rightContent: 'flat-color-icons:conference-call',
+    leftFooter: '总访问数',
+    color: 'green',
+    rightFooter: '5000',
+  },
+  {
+    title: '销售额',
+    extra: '日',
+    leftContent: '$1350',
+    rightContent: 'flat-color-icons:sales-performance',
+    leftFooter: '总销售额',
+    color: 'red',
+    rightFooter: '$550000',
+  },
+]);
+const chartTabs = ref([
+  {
+    name: '1',
+    title: '流量趋势',
+    option: {
+      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          // label: {
+          //   backgroundColor: '#6a7985',
+          // },
+        },
+      },
+      legend: {
+        data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {},
+        },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+      ],
+      yAxis: [
+        {
+          type: 'value',
+        },
+      ],
+      series: [
+        {
+          name: 'Line 1',
+          type: 'line',
+          stack: 'Total',
+          smooth: true,
+          lineStyle: {
+            width: 0,
+          },
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgb(128, 255, 165)',
+              },
+              {
+                offset: 1,
+                color: 'rgb(1, 191, 236)',
+              },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+          data: [140, 232, 101, 264, 90, 340, 250],
+        },
+        {
+          name: 'Line 2',
+          type: 'line',
+          stack: 'Total',
+          smooth: true,
+          lineStyle: {
+            width: 0,
+          },
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgb(0, 221, 255)',
+              },
+              {
+                offset: 1,
+                color: 'rgb(77, 119, 255)',
+              },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+          data: [120, 282, 111, 234, 220, 340, 310],
+        },
+        {
+          name: 'Line 3',
+          type: 'line',
+          stack: 'Total',
+          smooth: true,
+          lineStyle: {
+            width: 0,
+          },
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgb(55, 162, 255)',
+              },
+              {
+                offset: 1,
+                color: 'rgb(116, 21, 219)',
+              },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+          data: [320, 132, 201, 334, 190, 130, 220],
+        },
+        {
+          name: 'Line 4',
+          type: 'line',
+          stack: 'Total',
+          smooth: true,
+          lineStyle: {
+            width: 0,
+          },
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgb(255, 0, 135)',
+              },
+              {
+                offset: 1,
+                color: 'rgb(135, 0, 157)',
+              },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+          data: [220, 402, 231, 134, 190, 230, 120],
+        },
+        {
+          name: 'Line 5',
+          type: 'line',
+          stack: 'Total',
+          smooth: true,
+          lineStyle: {
+            width: 0,
+          },
+          showSymbol: false,
+          label: {
+            show: true,
+            position: 'top',
+          },
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgb(255, 191, 0)',
+              },
+              {
+                offset: 1,
+                color: 'rgb(224, 62, 76)',
+              },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+          data: [220, 302, 181, 234, 210, 290, 150],
+        },
+      ],
+    },
+  },
+  {
+    name: '2',
+    title: '访问量',
+    option: {
+      xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          data: [
+            120,
+            {
+              value: 200,
+              itemStyle: {
+                color: '#a90000',
+              },
+            },
+            150,
+            80,
+            70,
+            110,
+            130,
+          ],
+          type: 'bar',
+        },
+      ],
+    },
+  },
+]);
 </script>
 
 <template>
-  <div>dashboard</div>
+  <Dashboard :cardList="cardList" :chartTabs="chartTabs"></Dashboard>
 </template>