first commit

2026-04-09 15:09:34 +08:00
commit d8e3a63df1
2246 changed files with 352109 additions and 0 deletions
@@ -0,0 +1,63 @@
+<template>
+  <Card title="成交占比" :loading="loading">
+    <div ref="chartRef" :style="{ width, height }"></div>
+  </Card>
+</template>
+<script lang="ts" setup>
+  import { Ref, ref, watch } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '300px',
+    },
+  });
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  watch(
+    () => props.loading,
+    () => {
+      if (props.loading) {
+        return;
+      }
+      setOptions({
+        tooltip: {
+          trigger: 'item',
+        },
+
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: '80%',
+            center: ['50%', '50%'],
+            color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
+            data: [
+              { value: 500, name: '电子产品' },
+              { value: 310, name: '服装' },
+              { value: 274, name: '化妆品' },
+              { value: 400, name: '家居' },
+            ].sort(function (a, b) {
+              return a.value - b.value;
+            }),
+            roseType: 'radius',
+            animationType: 'scale',
+            animationEasing: 'exponentialInOut',
+            animationDelay: function () {
+              return Math.random() * 400;
+            },
+          },
+        ],
+      });
+    },
+    { immediate: true }
+  );
+</script>