dashboard (#6)

* feat(dashboard): 增加dashboard示例

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

* feat(dashboard): 完善dashboard示例

packages/business/universal-ui/src/dashboard/dashboard.vue

@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import type { CardItem, ChartItem } from './typings';
+defineOptions({ name: 'Dashboard' });
+import Card from './card.vue';
+import ChartTab from './chartTab.vue';
+import ChartCard from './chartCard.vue';
+import { ref } from 'vue';
+
+interface Props {
+  cardList: CardItem[];
+  chartTabs: ChartItem[];
+}
+const itemA = ref({
+  title: '玫瑰图',
+  option: {
+    legend: {
+      top: 'bottom',
+    },
+    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, 200],
+        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 itemB = ref({
+  title: '雷达图',
+  option: {
+    legend: {
+      data: ['Allocated Budget', 'Actual Spending'],
+    },
+    radar: {
+      // shape: 'circle',
+      indicator: [
+        { name: 'Sales', max: 6500 },
+        { name: 'Administration', max: 16000 },
+        { name: 'Information Technology', max: 30000 },
+        { name: 'Customer Support', max: 38000 },
+        { name: 'Development', max: 52000 },
+        { name: 'Marketing', max: 25000 },
+      ],
+    },
+    series: [
+      {
+        name: 'Budget vs spending',
+        type: 'radar',
+        data: [
+          {
+            value: [4200, 3000, 20000, 35000, 50000, 18000],
+            name: 'Allocated Budget',
+          },
+          {
+            value: [5000, 14000, 28000, 26000, 42000, 21000],
+            name: 'Actual Spending',
+          },
+        ],
+      },
+    ],
+  },
+});
+const itemC = ref({
+  title: '饼图',
+  option: {
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      top: '5%',
+      left: 'center',
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+          position: 'center',
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 40,
+            fontWeight: 'bold',
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' },
+          { value: 580, name: 'Email' },
+          { value: 484, name: 'Union Ads' },
+          { value: 300, name: 'Video Ads' },
+        ],
+      },
+    ],
+  },
+});
+
+withDefaults(defineProps<Props>(), {
+  cardList: () => [],
+  chartTabs: () => [],
+});
+</script>
+
+<template>
+  <div>
+    <div class="grid grid-cols-4 gap-4 p-2">
+      <Card v-for="item in cardList" :key="item.title" :item="item" />
+    </div>
+    <div class="p-2"><ChartTab :items="chartTabs" /></div>
+    <div class="grid grid-cols-3 gap-2 p-2">
+      <ChartCard :item="itemA" />
+      <ChartCard :item="itemB" />
+      <ChartCard :item="itemC" />
+    </div>
+  </div>
+</template>