refactor(projects): 代码优化

ISSUES CLOSED: \
soybeanjs · May 30, 2022 · d9ac7e4 · d9ac7e4 · vercel · May 30, 2022
1 parent 6a5a357
commit d9ac7e4
Show file tree

Hide file tree

Showing 6 changed files with 201 additions and 38 deletions.
diff --git a/src/hooks/business/useEcharts.ts → src/composables/echarts.ts b/src/hooks/business/useEcharts.ts → src/composables/echarts.ts
@@ -1,4 +1,4 @@
-import { ref, watch, nextTick, onUnmounted, computed } from 'vue';
+import { ref, watch, nextTick, onUnmounted } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
 import * as echarts from 'echarts/core';
 import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts';
@@ -23,6 +23,7 @@ import type {
 import { LabelLayout, UniversalTransition } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
 import { useElementSize } from '@vueuse/core';
+import { useThemeStore } from '@/store';
 
 export type ECOption = echarts.ComposeOption<
   | BarSeriesOption
@@ -57,20 +58,22 @@ echarts.use([
 /**
  * Echarts hooks函数
  * @param options - 图表配置
- * @param darkMode - 暗黑模式
  * @param renderFun - 图表渲染函数(例如：图表监听函数)
  * @description 按需引入图表组件，没注册的组件需要先引入
  */
-export default function useEcharts(
+export function useEcharts(
   options: Ref<ECOption> | ComputedRef<ECOption>,
-  darkMode?: ComputedRef<boolean>,
   renderFun?: (chartInstance: echarts.ECharts) => void
 ) {
-  let chart: echarts.ECharts | null = null;
+  const theme = useThemeStore();
+
   const domRef = ref<HTMLElement | null>(null);
+
   const initialSize = { width: 0, height: 0 };
   const { width, height } = useElementSize(domRef, initialSize);
 
+  let chart: echarts.ECharts | null = null;
+
   function canRender() {
     return initialSize.width > 0 && initialSize.height > 0;
   }
@@ -87,9 +90,9 @@ export default function useEcharts(
 
   async function render() {
     if (domRef.value) {
-      const theme = darkMode?.value ? 'dark' : 'light';
+      const chartTheme = theme.darkMode ? 'dark' : 'light';
       await nextTick();
-      chart = echarts.init(domRef.value, theme);
+      chart = echarts.init(domRef.value, chartTheme);
       if (renderFun) {
         renderFun(chart);
       }
@@ -110,7 +113,7 @@ export default function useEcharts(
     render();
   }
 
-  watch([width, height], ([newWidth, newHeight]) => {
+  const stopSizeWatch = watch([width, height], ([newWidth, newHeight]) => {
     initialSize.width = newWidth;
     initialSize.height = newHeight;
     if (canRender()) {
@@ -122,16 +125,22 @@ export default function useEcharts(
     }
   });
 
-  watch(options, newValue => {
+  const stopOptionWatch = watch(options, newValue => {
     update(newValue);
   });
 
-  watch(darkMode || computed(() => false), () => {
-    updateTheme();
-  });
+  const stopDarkModeWatch = watch(
+    () => theme.darkMode,
+    () => {
+      updateTheme();
+    }
+  );
 
   onUnmounted(() => {
     destroy();
+    stopSizeWatch();
+    stopOptionWatch();
+    stopDarkModeWatch();
   });
 
   return {

diff --git a/src/composables/index.ts b/src/composables/index.ts
@@ -1,3 +1,4 @@
 export * from './system';
 export * from './router';
 export * from './layout';
+export * from './echarts';
diff --git a/src/hooks/business/index.ts b/src/hooks/business/index.ts
@@ -1,8 +1,5 @@
-import useEcharts from './useEcharts';
 import useCountDown from './useCountDown';
 import useSmsCode from './useSmsCode';
 import useImageVerify from './useImageVerify';
 
-export { useEcharts, useCountDown, useSmsCode, useImageVerify };
-
-export * from './useEcharts';
+export { useCountDown, useSmsCode, useImageVerify };
diff --git a/src/typings/route.d.ts b/src/typings/route.d.ts
@@ -40,6 +40,7 @@ declare namespace AuthRoute {
     | 'plugin_charts_echarts'
     | 'plugin_charts_d3'
     | 'plugin_charts_antv'
+    | 'plugin_charts_chartjs'
     | 'auth-demo'
     | 'auth-demo_permission'
     | 'auth-demo_super'

diff --git a/src/views/dashboard/analysis/components/TopChart/index.vue b/src/views/dashboard/analysis/components/TopChart/index.vue
@@ -31,13 +31,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useThemeStore } from '@/store';
-import { useEcharts, type ECOption } from '@/hooks';
-
-const theme = useThemeStore();
-
-const darkMode = computed(() => theme.darkMode);
+import { ref } from 'vue';
+import { useEcharts, type ECOption } from '@/composables';
 
 const lineOptions = ref<ECOption>({
   tooltip: {
@@ -133,7 +128,7 @@ const lineOptions = ref<ECOption>({
     }
   ]
 });
-const { domRef: lineRef } = useEcharts(lineOptions, darkMode);
+const { domRef: lineRef } = useEcharts(lineOptions);
 
 const pieOptions = ref<ECOption>({
   tooltip: {
@@ -180,7 +175,7 @@ const pieOptions = ref<ECOption>({
     }
   ]
 });
-const { domRef: pieRef } = useEcharts(pieOptions, darkMode);
+const { domRef: pieRef } = useEcharts(pieOptions);
 </script>
 
 <style scoped></style>
diff --git a/src/views/plugin/charts/echarts/index.vue b/src/views/plugin/charts/echarts/index.vue
@@ -16,13 +16,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useThemeStore } from '@/store';
-import { useEcharts, type ECOption } from '@/hooks';
-
-const theme = useThemeStore();
-
-const darkMode = computed(() => theme.darkMode);
+import { ref } from 'vue';
+import { useEcharts, type ECOption } from '@/composables';
 
 const pieOptions = ref<ECOption>({
   legend: {},
@@ -58,7 +53,7 @@ const pieOptions = ref<ECOption>({
     }
   ]
 });
-const { domRef: pieRef } = useEcharts(pieOptions, darkMode);
+const { domRef: pieRef } = useEcharts(pieOptions);
 
 const lineOptions = ref<ECOption>({
   tooltip: {
@@ -70,22 +65,185 @@ const lineOptions = ref<ECOption>({
       }
     }
   },
+  title: {
+    text: 'Stacked Line'
+  },
+  legend: {
+    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: {}
+    }
+  },
   xAxis: {
     type: 'category',
+    boundaryGap: false,
     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   },
   yAxis: {
     type: 'value'
   },
   series: [
     {
-      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      color: '#37a2da',
+      name: 'Email',
       type: 'line',
-      smooth: true
+      smooth: true,
+      stack: 'Total',
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0.25,
+              color: '#37a2da'
+            },
+            {
+              offset: 1,
+              color: '#fff'
+            }
+          ]
+        }
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: [120, 132, 101, 134, 90, 230, 210]
+    },
+    {
+      color: '#9fe6b8',
+      name: 'Union Ads',
+      type: 'line',
+      smooth: true,
+      stack: 'Total',
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0.25,
+              color: '#9fe6b8'
+            },
+            {
+              offset: 1,
+              color: '#fff'
+            }
+          ]
+        }
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: [220, 182, 191, 234, 290, 330, 310]
+    },
+    {
+      color: '#fedb5c',
+      name: 'Video Ads',
+      type: 'line',
+      smooth: true,
+      stack: 'Total',
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0.25,
+              color: '#fedb5c'
+            },
+            {
+              offset: 1,
+              color: '#fff'
+            }
+          ]
+        }
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: [150, 232, 201, 154, 190, 330, 410]
+    },
+    {
+      color: '#fb7293',
+      name: 'Direct',
+      type: 'line',
+      smooth: true,
+      stack: 'Total',
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0.25,
+              color: '#fb7293'
+            },
+            {
+              offset: 1,
+              color: '#fff'
+            }
+          ]
+        }
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: [320, 332, 301, 334, 390, 330, 320]
+    },
+    {
+      color: '#e7bcf3',
+      name: 'Search Engine',
+      type: 'line',
+      smooth: true,
+      stack: 'Total',
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0.25,
+              color: '#e7bcf3'
+            },
+            {
+              offset: 1,
+              color: '#fff'
+            }
+          ]
+        }
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: [820, 932, 901, 934, 1290, 1330, 1320]
     }
   ]
 });
-const { domRef: lineRef } = useEcharts(lineOptions, darkMode);
+const { domRef: lineRef } = useEcharts(lineOptions);
 
 const barOptions = ref<ECOption>({
   tooltip: {
@@ -108,14 +266,15 @@ const barOptions = ref<ECOption>({
     {
       data: [120, 200, 150, 80, 70, 110, 130],
       type: 'bar',
+      color: '#8378ea',
       showBackground: true,
       backgroundStyle: {
         color: 'rgba(180, 180, 180, 0.2)'
       }
     }
   ]
 });
-const { domRef: barRef } = useEcharts(barOptions, darkMode);
+const { domRef: barRef } = useEcharts(barOptions);
 
 const scatterOptions = ref<ECOption>({
   tooltip: {},
@@ -148,12 +307,13 @@ const scatterOptions = ref<ECOption>({
         [7.08, 5.82],
         [5.02, 5.68]
       ],
+      color: '#fedb5c',
       type: 'scatter'
     }
   ]
 });
 
-const { domRef: scatterRef } = useEcharts(scatterOptions, darkMode);
+const { domRef: scatterRef } = useEcharts(scatterOptions);
 </script>
 
 <style scoped></style>