refactor(projects): perf page home

src/views/home/modules/line-chart.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+import { $t } from '@/locales';
+import { useAppStore } from '@/store/modules/app';
+import { useEcharts } from '@/hooks/chart/use-echarts';
+
+defineOptions({
+  name: 'LineChart'
+});
+
+const appStore = useAppStore();
+
+const { domRef, updateOptions } = useEcharts(() => ({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    data: [$t('page.home.downloadCount'), $t('page.home.registerCount')]
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: [] as string[]
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      color: '#8e9dff',
+      name: $t('page.home.downloadCount'),
+      type: 'line',
+      smooth: true,
+      stack: 'Total',
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0.25,
+              color: '#8e9dff'
+            },
+            {
+              offset: 1,
+              color: '#fff'
+            }
+          ]
+        }
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: [] as number[]
+    },
+    {
+      color: '#26deca',
+      name: $t('page.home.registerCount'),
+      type: 'line',
+      smooth: true,
+      stack: 'Total',
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0.25,
+              color: '#26deca'
+            },
+            {
+              offset: 1,
+              color: '#fff'
+            }
+          ]
+        }
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: []
+    }
+  ]
+}));
+
+async function mockData() {
+  await new Promise(resolve => {
+    setTimeout(resolve, 1000);
+  });
+
+  updateOptions(opts => {
+    opts.xAxis.data = ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'];
+    opts.series[0].data = [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311];
+    opts.series[1].data = [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678];
+
+    return opts;
+  });
+}
+
+function updateLocale() {
+  updateOptions((opts, factory) => {
+    const originOpts = factory();
+
+    opts.legend.data = originOpts.legend.data;
+    opts.series[0].name = originOpts.series[0].name;
+    opts.series[1].name = originOpts.series[1].name;
+
+    return opts;
+  });
+}
+
+async function init() {
+  mockData();
+}
+
+watch(
+  () => appStore.locale,
+  () => {
+    updateLocale();
+  }
+);
+
+// init
+init();
+</script>
+
+<template>
+  <NCard :bordered="false" class="card-wrapper">
+    <div ref="domRef" class="h-360px overflow-hidden"></div>
+  </NCard>
+</template>
+
+<style scoped></style>