feat: add useEcharts composable

flingyp · Jul 11, 2023 · d3e295c · d3e295c
1 parent 76165d9
commit d3e295c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
@@ -173,6 +173,7 @@ declare global {
   const useDraggable: typeof import('@vueuse/core')['useDraggable']
   const useDriver: typeof import('./src/composables/common/useDriver/index')['useDriver']
   const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useEcharts: typeof import('./src/composables/common/useEharts/index')['useEcharts']
   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
   const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
   const useElementHover: typeof import('@vueuse/core')['useElementHover']
@@ -490,6 +491,7 @@ declare module 'vue' {
     readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
     readonly useDriver: UnwrapRef<typeof import('./src/composables/common/useDriver/index')['useDriver']>
     readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
+    readonly useEcharts: UnwrapRef<typeof import('./src/composables/common/useEharts/index')['useEcharts']>
     readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
     readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
     readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>

diff --git a/src/composables/common/useEharts/index.ts b/src/composables/common/useEharts/index.ts
@@ -0,0 +1,13 @@
+import { ECOption } from '~/utils'
+
+/**
+ * Used to initialize chart options composable
+ * @param defaultOption
+ * @returns
+ */
+export const useEcharts = (defaultOption: ECOption) => {
+  const option: ECOption = defaultOption
+  return {
+    option,
+  }
+}
diff --git a/src/views/features/Echarts.vue b/src/views/features/Echarts.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ECOption } from '~/utils'
 import Echarts from '~/components/common/Echarts.vue'
 
-const chartOne: ECOption = {
+const { option: chartOne } = useEcharts({
   title: {
     text: '柱状图',
   },
@@ -82,9 +81,9 @@ const chartOne: ECOption = {
       data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
     },
   ],
-}
+})
 
-const chartTwo: ECOption = {
+const { option: chartTwo } = useEcharts({
   title: {
     text: '南丁格尔图',
   },
@@ -110,9 +109,9 @@ const chartTwo: ECOption = {
       ],
     },
   ],
-}
+})
 
-const chartThree: ECOption = {
+const { option: chartThree } = useEcharts({
   title: {
     text: '折线图',
   },
@@ -165,7 +164,7 @@ const chartThree: ECOption = {
       data: [820, 932, 901, 934, 1290, 1330, 1320],
     },
   ],
-}
+})
 
 const chartFiveData = [
   [
@@ -212,7 +211,7 @@ const chartFiveData = [
   ],
 ]
 
-const chartFive: ECOption = {
+const { option: chartFive } = useEcharts({
   backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
     {
       offset: 0,
@@ -320,7 +319,7 @@ const chartFive: ECOption = {
       },
     },
   ],
-}
+})
 
 </script>