feat(echarts): complete echarts component

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",

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 }

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>

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

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
   }
 }

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

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">

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>

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>

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']

vite.config.ts

@@ -36,7 +36,8 @@ export default defineConfig(({ command, mode }) => {
         '@iconify/iconify',
         '@vueuse/core',
         'axios',
-        'vue-types'
+        'vue-types',
+        'echarts'
       ]
     }
   }