dashboard (#6)

* feat(dashboard): 增加dashboard示例

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

* feat(dashboard): 完善dashboard示例

packages/business/chart-ui/src/chart.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { echartsInstance, ECOption } from './index';
+import { onMounted, ref, unref, warn } from 'vue';
+import { usePreferences } from '@vben-core/preferences';
+const { isDark } = usePreferences();
+interface Props {
+  height?: string;
+  width?: string;
+}
+withDefaults(defineProps<Props>(), {
+  height: '500px',
+  width: '100%',
+});
+
+const instance = ref();
+const instanceRef = ref(HTMLElement);
+onMounted(() => {
+  instance.value = echartsInstance.init(
+    instanceRef.value,
+    isDark.value ? 'dark' : '',
+  );
+});
+const setChart = (option: ECOption, clear: boolean = true) => {
+  const c = unref(instance);
+  if (!c) {
+    warn('instance is null');
+    return;
+  }
+  if (clear) c.clear();
+  c.setOption(option);
+};
+defineExpose({ setChart });
+</script>
+
+<template>
+  <div ref="instanceRef" :style="{ height, width }"></div>
+</template>

packages/business/chart-ui/src/index.ts

@@ -0,0 +1,59 @@
+import * as echarts from 'echarts/core';
+import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+
+  // 数据集组件
+  DatasetComponent,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent,
+  LegendComponent,
+  ToolboxComponent,
+} from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import type {
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineSeriesOption,
+} from 'echarts/charts';
+import type {
+  // 组件类型的定义后缀都为 ComponentOption
+  TitleComponentOption,
+  TooltipComponentOption,
+  GridComponentOption,
+  DatasetComponentOption,
+} from 'echarts/components';
+import type { ComposeOption } from 'echarts/core';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+export type ECOption = ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+>;
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  PieChart,
+  RadarChart,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  BarChart,
+  LineChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  LegendComponent,
+  ToolboxComponent,
+]);
+export const echartsInstance = echarts;
+export { default as chart } from './chart.vue';