feat: (update) 动态maxNumber

src/views/dashboard/analysis/components/VisitAnalysis.vue

@@ -3,10 +3,10 @@
 </template>
 <script lang="ts">
   import { basicProps } from './props';
-  import { dateUtil } from '/@/utils/dateUtil';
+  // import { dateUtil } from '/@/utils/dateUtil';
 </script>
 <script lang="ts" setup>
-  import { onMounted, ref, Ref, watch } from 'vue';
+  import { ref, Ref, watch } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
 
   const props = defineProps({
@@ -16,56 +16,11 @@
   const userAmountData = ref<number[]>([]);
   const yixStringData = ref<string[]>([]);
   const maxSize = ref(0);
-  watch(
-    () => props.bulletChatAmounts,
-    (data) => {
-      // console.log('viewStatics-data', data);
-      bulletChatAmountsData.value = data.reduce<number[]>(
-        (prev: number[], current) => prev.concat(Number(current.amount)),
-        [],
-      );
-
-      maxSize.value = Math.floor(Math.max(...bulletChatAmountsData.value) / 1000) * 1000 + 500;
-
-      yixStringData.value = data.reduce<string[]>(
-        (prev: string[], current) => prev.concat(current.date),
-        [],
-      );
-
-      // viewStaticsData.value = data;
-    },
-    {
-      immediate: true,
-      deep: true,
-    },
-  );
-
-  watch(
-    () => props.userAmount,
-    (data) => {
-      // console.log('viewStatics-data', data);
-      userAmountData.value = data.reduce<number[]>(
-        (prev: number[], current) => prev.concat(Number(current.amount)),
-        [],
-      );
-
-      yixStringData.value = data.reduce<string[]>(
-        (prev: string[], current) => prev.concat(`${dateUtil(current.date).format('DD')}日`),
-        [],
-      );
-
-      // viewStaticsData.value = data;
-    },
-    {
-      immediate: true,
-      deep: true,
-    },
-  );
 
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
-  onMounted(() => {
+  function handleSetOptions() {
     setOptions({
       tooltip: {
         trigger: 'axis',
@@ -136,5 +91,36 @@
         },
       ],
     });
-  });
+  }
+
+  watch(
+    () => [props.bulletChatAmounts, props.userAmount],
+    ([data1, data2]) => {
+      bulletChatAmountsData.value = data1.reduce<number[]>(
+        (prev: number[], current) => prev.concat(Number(current.amount)),
+        [],
+      );
+
+      yixStringData.value = data1.reduce<string[]>(
+        (prev: string[], current) => prev.concat(current.date),
+        [],
+      );
+
+      userAmountData.value = data2.reduce<number[]>(
+        (prev: number[], current) => prev.concat(Number(current.amount)),
+        [],
+      );
+      console.log('viewStatics-data', bulletChatAmountsData.value);
+      const maxNumber = Math.max(...bulletChatAmountsData.value);
+      const pow = Math.pow(10, maxNumber.toString().length - 1);
+      maxSize.value = Math.floor(maxNumber / 10) * 10 + pow * 2;
+      console.log('maxSize', maxSize.value);
+      handleSetOptions();
+      // viewStaticsData.value = data;
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
 </script>

src/views/dashboard/analysis/components/VisitAnalysisBar.vue

@@ -6,7 +6,7 @@
   // import { dateUtil } from '/@/utils/dateUtil';
 </script>
 <script lang="ts" setup>
-  import { onMounted, ref, Ref, watch } from 'vue';
+  import { ref, Ref, watch } from 'vue';
   // import type { dataItemType } from './props';
   import { useECharts } from '/@/hooks/web/useECharts';
   const props = defineProps({
@@ -17,47 +17,10 @@
   const shareStaticsData = ref<number[]>([]);
   const yixStringData = ref<string[]>([]);
   const maxSize = ref(0);
-  // props.viewStatics,
-  watch(
-    () => props.viewStatics,
-    (data) => {
-      console.log('viewStatics-data', data);
-      viewStaticsData.value = data.reduce<number[]>(
-        (prev: number[], current) => prev.concat(Number(current.amount)),
-        [],
-      );
-
-      yixStringData.value = data.reduce<string[]>(
-        (prev: string[], current) => prev.concat(current.date),
-        [],
-      );
-      console.log('yixStringData', yixStringData.value);
-      maxSize.value = Math.floor(Math.max(...viewStaticsData.value) / 1000) * 1000 + 500;
-      // viewStaticsData.value = data;
-    },
-    {
-      immediate: true,
-      deep: true,
-    },
-  );
-
-  watch(
-    () => props.shareStatics,
-    (data) => {
-      shareStaticsData.value = data.reduce<number[]>(
-        (prev: number[], current) => prev.concat(Number(current.amount)),
-        [],
-      );
-    },
-    {
-      immediate: true,
-      deep: true,
-    },
-  );
-
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-  onMounted(() => {
+
+  function handlesetOptions() {
     setOptions({
       tooltip: {
         trigger: 'axis',
@@ -100,5 +63,35 @@
         },
       ],
     });
-  });
+  }
+  // props.viewStatics,
+  watch(
+    () => [props.viewStatics, props.shareStatics],
+    ([data1, data2]) => {
+      console.log('viewStatics-data', data1);
+      viewStaticsData.value = data1.reduce<number[]>(
+        (prev: number[], current) => prev.concat(Number(current.amount)),
+        [],
+      );
+
+      yixStringData.value = data1.reduce<string[]>(
+        (prev: string[], current) => prev.concat(current.date),
+        [],
+      );
+      shareStaticsData.value = data2.reduce<number[]>(
+        (prev: number[], current) => prev.concat(Number(current.amount)),
+        [],
+      );
+
+      const maxNumber = Math.max(...viewStaticsData.value);
+      const pow = Math.pow(10, maxNumber.toString().length - 1);
+      maxSize.value = Math.floor(maxNumber / 10) * 10 + pow * 2;
+      console.log('maxSize', maxSize.value);
+      handlesetOptions();
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
 </script>