项目创建

2025-07-04 17:16:38 +08:00
parent ce47b39fa5
commit 719911918f
372 changed files with 105035 additions and 32 deletions
@@ -0,0 +1,96 @@
+<template>
+  <div ref="chartRef" class="ring-chart" :style="{ height: props.height }"></div>
+</template>
+
+<script setup lang="ts">
+  import type { EChartsOption } from 'echarts'
+  import { useChart, useChartOps } from '@/composables/useChart'
+  const { chartRef, initChart, isDark } = useChart()
+
+  interface Props {
+    data?: Array<{ value: number; name: string }>
+    height?: string
+    color?: string[]
+    radius?: string[]
+    borderRadius?: number
+    centerText?: string
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: () => [
+      { value: 35, name: '分类1' },
+      { value: 25, name: '分类2' },
+      { value: 20, name: '分类3' },
+      { value: 20, name: '分类4' }
+    ],
+    height: useChartOps().chartHeight,
+    color: () => [],
+    radius: () => ['50%', '80%'],
+    borderRadius: 10,
+    centerText: ''
+  })
+
+  const options: () => EChartsOption = () => {
+    const opt: EChartsOption = {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{b}: {d}%'
+      },
+      series: [
+        {
+          name: '数据占比',
+          type: 'pie',
+          radius: props.radius,
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: props.borderRadius
+          },
+          label: {
+            show: false,
+            formatter: '{b}\n{d}%',
+            position: 'outside',
+            color: '#999'
+          },
+          emphasis: {
+            label: {
+              show: false,
+              fontSize: 14,
+              fontWeight: 'bold'
+            }
+          },
+          labelLine: {
+            show: true,
+            length: 15,
+            length2: 25,
+            smooth: true
+          },
+          data: props.data,
+          color: props.color
+        }
+      ]
+    }
+
+    if (props.centerText) {
+      opt.title = {
+        text: props.centerText,
+        left: 'center',
+        top: 'center',
+        textStyle: {
+          fontSize: 18,
+          fontWeight: 500,
+          color: '#ADB0BC'
+        }
+      }
+    }
+
+    return opt
+  }
+
+  watch(isDark, () => {
+    initChart(options())
+  })
+
+  onMounted(() => {
+    initChart(options())
+  })
+</script>