From 2d7035a2d16a50ccde8c593c527d5932c601d3b4 Mon Sep 17 00:00:00 2001
From: 64584ef1ecd7b40dc29f18f5 <64584ef1ecd7b40dc29f18f5@devide>
Date: Mon, 8 May 2023 02:56:18 +0000
Subject: [PATCH] UPDATE

---
 src/components/Pie3D.vue | 22 ++++++++++++++++++++--
 src/utils/pie.js         | 12 ++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/pie.js

diff --git a/src/components/Pie3D.vue b/src/components/Pie3D.vue
index 66373c9..1716be1 100644
--- a/src/components/Pie3D.vue
+++ b/src/components/Pie3D.vue
@@ -1,10 +1,28 @@
 <template>
   <div>
-    3Dpie
+    <p>D3JS实现的3D饼图</p>
+    <div id="abc"></div>
   </div>
 </template>
 
-<script>
+<script setup>
+import pie from '../utils/pie'
+import { onMounted, reactive } from 'vue';
+
+let config = reactive({
+  
+})
+//基础数据
+const salesData = [
+    {label: "Basic", value: 100, color: "#0f7eee",show:true},
+    {label: "Plus", value: 20, color: "#24DAff",show:true},
+    {label: "Lite", value: 30, color: "#ffff80",show:true},
+    {label: "Elite", value: 40, color: "#caf982",show:true},
+    {label: "Delux", value: 50, color: "#80dcff",show:true},
+];
+onMounted(() => {
+  pie('#abc', 700, 400, salesData, 250, 200, 150, 100, 30, config)
+})
 
 </script>
 
diff --git a/src/utils/pie.js b/src/utils/pie.js
new file mode 100644
index 0000000..69e9a9d
--- /dev/null
+++ b/src/utils/pie.js
@@ -0,0 +1,12 @@
+/**
+ * 生成3d饼图
+ * @param {*} id ：id唯一标识
+ * @param {*} width ：svg的宽
+ * @param {*} height ：svg的高
+ * @param {*} data ：要渲染的数据
+ * @param {*} x ：横向偏移量
+ * @param {*} y ：纵向偏移量
+ * @param {*} rx ：饼图的横向半径
+ * @param {*} ry ：饼图的纵向半径
+ * @param {*} h ：饼图的高度
+ */
-- 
GitLab