diff --git a/package.json b/package.json
index b0f4b16..4f5ba06 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@iconify/iconify": "^2.2.0",
     "@vueuse/core": "^8.1.1",
     "axios": "^0.25.0",
+    "echarts": "5.3.1",
     "element-plus": "^2.1.4",
     "less": "^4.1.2",
     "lodash": "^4.17.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cef9eeb..b111105 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,6 +21,7 @@ specifiers:
   cross-env: ^7.0.3
   cz-conventional-changelog: ^3.3.0
   dotenv: ^14.3.2
+  echarts: 5.3.1
   element-plus: ^2.1.4
   eslint: ^8.7.0
   eslint-config-prettier: ^8.3.0
@@ -57,6 +58,7 @@ dependencies:
   '@iconify/iconify': 2.2.0
   '@vueuse/core': 8.2.0_vue@3.2.31
   axios: 0.25.0
+  echarts: 5.3.1
   element-plus: 2.1.6_1a412d14def5ff5ca1122000e4bee666
   less: 4.1.2
   lodash: 4.17.21
@@ -1790,6 +1792,13 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /echarts/5.3.1:
+    resolution: {integrity: sha512-nWdlbgX3OVY0hpqncSvp0gDt1FRSKWn7lsWEH+PHmfCuvE0QmSw17pczQvm8AvawnLEkmf1Cts7YwQJZNC0AEQ==}
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.3.1
+    dev: false
+
   /electron-to-chromium/1.4.96:
     resolution: {integrity: sha512-DPNjvNGPabv6FcyjzLAN4C0psN/GgD9rSGvMTuv81SeXG/EX3mCz0wiw9N1tUEnfQXYCJi3H8M0oFPRziZh7rw==}
     dev: true
@@ -4169,6 +4178,10 @@ packages:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
 
+  /tslib/2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+    dev: false
+
   /tslib/2.3.1:
     resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
     dev: false
@@ -4600,3 +4613,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: true
+
+  /zrender/5.3.1:
+    resolution: {integrity: sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==}
+    dependencies:
+      tslib: 2.3.0
+    dev: false
diff --git a/src/components/Echarts/index.ts b/src/components/Echarts/index.ts
new file mode 100644
index 0000000..0822970
--- /dev/null
+++ b/src/components/Echarts/index.ts
@@ -0,0 +1,10 @@
+/*
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-06 11:13:32
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-06 11:13:32
+ */
+import Echart from './src/Echarts.vue'
+
+export { Echart }
diff --git a/src/components/Echarts/src/Echarts.vue b/src/components/Echarts/src/Echarts.vue
new file mode 100644
index 0000000..a5d4ab4
--- /dev/null
+++ b/src/components/Echarts/src/Echarts.vue
@@ -0,0 +1,138 @@
+<!--
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-06 10:32:17
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-07 16:12:17
+-->
+<template>
+  <div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles"></div>
+</template>
+
+<script lang="ts" setup>
+import {
+  PropType,
+  ref,
+  watch,
+  defineProps,
+  computed,
+  unref,
+  onMounted,
+  onBeforeUnmount,
+  onActivated
+} from 'vue'
+import { isString } from '@/utils/is'
+import { debounce } from 'lodash'
+import { useDesign } from '@/hooks'
+import echarts from '@/plugins/echarts'
+import type { EChartsOption } from 'echarts'
+import { propTypes } from '@/utils/propTypes'
+
+const prefixCls = useDesign('prefix', 'echarts')
+const variables = useDesign('variables')
+let namespace: any
+if (typeof variables != 'string') {
+  namespace = variables.namespace
+}
+
+const props = defineProps({
+  options: {
+    type: Object as PropType<EChartsOption>,
+    required: true
+  },
+  width: propTypes.oneOfType([Number, String]).def(''),
+  height: propTypes.oneOfType([Number, String]).def('500px')
+})
+
+const options = computed(() => {
+  return Object.assign(props.options, {
+    darkMode: 'auto'
+  })
+})
+
+// eslint-disable-next-line no-undef
+const elRef = ref<ElRef>()
+
+// eslint-disable-next-line no-undef
+let echartRef: Nullable<echarts.ECharts> = null
+
+const contentEl = ref<Element>()
+
+const styles = computed(() => {
+  const width = isString(props.width) ? props.width : `${props.width}px`
+  const height = isString(props.height) ? props.height : `${props.height}px`
+
+  return {
+    width,
+    height
+  }
+})
+
+const initChart = () => {
+  if (unref(elRef) && props.options) {
+    echartRef = echarts.init(unref(elRef) as HTMLElement)
+    echartRef?.setOption(unref(options))
+  }
+}
+
+watch(
+  () => options.value,
+  (options) => {
+    if (echartRef) {
+      echartRef?.setOption(options)
+    }
+  },
+  {
+    deep: true
+  }
+)
+
+const resizeHandler = debounce(() => {
+  if (echartRef) {
+    echartRef.resize()
+  }
+}, 100)
+
+const contentResizeHandler = async (e: TransitionEvent) => {
+  if (e.propertyName === 'width') {
+    resizeHandler()
+  }
+}
+
+onMounted(() => {
+  initChart()
+
+  window.addEventListener('resize', resizeHandler)
+
+  // contentEl.value = document.getElementsByClassName(
+  //   `${namespace}-layout-content`
+  // )[0]
+  // unref(contentEl) &&
+  //   (unref(contentEl) as HTMLElement).addEventListener(
+  //     'transitionend',
+  //     contentResizeHandler
+  //   )
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', resizeHandler)
+  // unref(contentEl) &&
+  //   (unref(contentEl) as HTMLElement).removeEventListener(
+  //     'transitionend',
+  //     contentResizeHandler
+  //   )
+})
+
+onActivated(() => {
+  if (echartRef) {
+    echartRef.resize()
+  }
+})
+</script>
+
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-echarts';
+
+.@{prefix-cls} {
+}
+</style>
diff --git a/src/components/Menu/src/components/useRenderMenuTitle.tsx b/src/components/Menu/src/components/useRenderMenuTitle.tsx
index c80298e..e07d74a 100644
--- a/src/components/Menu/src/components/useRenderMenuTitle.tsx
+++ b/src/components/Menu/src/components/useRenderMenuTitle.tsx
@@ -12,7 +12,7 @@ export const useRenderMenuTitle = () => {
   const renderMenuTitle = (meta?: RouteMeta) => {
     let icon
     const type = meta?.icon?.split('-')[0] == 'fa' ? 'iconify' : 'iconfont'
-    if (type == 'iconify' ) {
+    if (type == 'iconify') {
       icon = meta?.icon?.split('-')[1]
     } else {
       icon = meta?.icon
diff --git a/src/hooks/web/useDesign.ts b/src/hooks/web/useDesign.ts
index d4a8a4b..1086677 100644
--- a/src/hooks/web/useDesign.ts
+++ b/src/hooks/web/useDesign.ts
@@ -3,7 +3,7 @@
  * @Autor: YDKD
  * @Date: 2022-03-23 16:46:13
  * @LastEditors: YDKD
- * @LastEditTime: 2022-03-23 17:02:13
+ * @LastEditTime: 2022-04-07 15:43:59
  */
 import variables from '@/styles/variables.module.less'
 
@@ -22,6 +22,6 @@ export const useDesign = (type: Type = 'prefix', componentScope?: string) => {
   if (type == 'prefix') {
     return getPrefixCls(componentScope!)
   } else {
-    return lessVariables
+    return variables
   }
 }
diff --git a/src/plugins/echarts/index.ts b/src/plugins/echarts/index.ts
new file mode 100644
index 0000000..1049a5d
--- /dev/null
+++ b/src/plugins/echarts/index.ts
@@ -0,0 +1,31 @@
+import * as echarts from 'echarts/core'
+
+import { PieChart } from 'echarts/charts'
+
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  LegendComponent,
+  ToolboxComponent
+} from 'echarts/components'
+
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  PieChart,
+  CanvasRenderer,
+  ToolboxComponent
+])
+
+export default echarts
diff --git a/src/views/analysis/index.vue b/src/views/analysis/index.vue
index e6837f0..e894778 100644
--- a/src/views/analysis/index.vue
+++ b/src/views/analysis/index.vue
@@ -3,7 +3,7 @@
  * @Autor: YDKD
  * @Date: 2022-03-24 15:42:06
  * @LastEditors: YDKD
- * @LastEditTime: 2022-03-24 15:49:29
+ * @LastEditTime: 2022-04-06 10:53:25
 -->
 <template>
   <div :class="prefixCls">
diff --git a/src/views/attendance/components/count-panel.vue b/src/views/attendance/components/count-panel.vue
new file mode 100644
index 0000000..00d4a74
--- /dev/null
+++ b/src/views/attendance/components/count-panel.vue
@@ -0,0 +1,22 @@
+<!--
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-06 10:11:27
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-07 16:30:18
+-->
+<template>
+  <div :class="prefixCls"></div>
+</template>
+
+<script lang="ts" setup>
+import { useDesign } from '@/hooks'
+const prefixCls = useDesign('prefix', 'count-panel')
+</script>
+
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-count-panel';
+
+.@{prefix-cls} {
+}
+</style>
diff --git a/src/views/attendance/index.vue b/src/views/attendance/index.vue
new file mode 100644
index 0000000..0f3539b
--- /dev/null
+++ b/src/views/attendance/index.vue
@@ -0,0 +1,25 @@
+<!--
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-06 09:43:12
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-06 10:13:21
+-->
+<template>
+  <div :class="prefixCls">
+    <count-pnale />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDesign } from '@/hooks'
+import countPnale from './components/count-panel.vue'
+const prefixCls = useDesign('prefix', 'person-attendance')
+</script>
+
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-person-attendance';
+
+.@{prefix-cls} {
+}
+</style>
diff --git a/types/components.d.ts b/types/components.d.ts
index f6a8a7b..0248863 100644
--- a/types/components.d.ts
+++ b/types/components.d.ts
@@ -5,20 +5,16 @@
 declare module 'vue' {
   export interface GlobalComponents {
     ButtonSrcButton: typeof import('./../src/components/Button/src/Button.vue')['default']
+    EchartsSrcEcharts: typeof import('./../src/components/Echarts/src/Echarts.vue')['default']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
-    ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
diff --git a/vite.config.ts b/vite.config.ts
index dba4d8b..191bd3f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -36,7 +36,8 @@ export default defineConfig(({ command, mode }) => {
         '@iconify/iconify',
         '@vueuse/core',
         'axios',
-        'vue-types'
+        'vue-types',
+        'echarts'
       ]
     }
   }