feat: 饼图添加角度配置

src/packages/components/Charts/Pies/PieCircle/config.ts

@@ -11,25 +11,27 @@ const option = {
     trigger: 'item'
   },
   legend: {
-    show: true,
+    show: true
   },
   dataset: 0.25,
   title: {
-    text: 25 + "%",
+    text: 25 + '%',
-    x: "center",
+    x: 'center',
-    y: "center",
+    y: 'center',
     textStyle: {
-      color: "#56B9F8",
+      color: '#56B9F8',
       fontSize: 30
     }
   },
   series: [
     {
-      type: "pie",
+      type: 'pie',
-      radius: ["75%", "80%"],
+      radius: ['75%', '80%'],
-      center: ["50%", "50%"],
+      center: ['50%', '50%'],
       hoverAnimation: true,
-      color: ["#00bcd44a", "transparent"],
+      color: ['#00bcd44a', 'transparent'],
+      startAngle: 0,
+      endAngle: 360,
       label: {
         show: false
       },
@@ -37,21 +39,21 @@ const option = {
         {
           value: [25],
           itemStyle: {
-            color: "#03a9f4",
+            color: '#03a9f4',
             shadowBlur: 10,
-            shadowColor:"#97e2f5"
+            shadowColor: '#97e2f5'
           }
         },
         {
           value: [75],
           itemStyle: {
-            color: "#00bcd44a",
+            color: '#00bcd44a',
             shadowBlur: 0,
-            shadowColor:"#00bcd44a"
+            shadowColor: '#00bcd44a'
           }
         }
       ]
-    },
+    }
   ]
 }
 

src/packages/components/Charts/Pies/PieCircle/config.vue

@@ -82,6 +82,32 @@
         />
       </SettingItem>
     </SettingItemBox>
+    <SettingItemBox name="角度">
+      <SettingItem name="起始角度">
+        <n-input-number
+          v-model:value="optionData.series[0].startAngle"
+          :min="0"
+          :step="1"
+          :max="360"
+          size="small"
+          placeholder="支持范围[0, 360]"
+        >
+          <template #suffix> ° </template>
+        </n-input-number>
+      </SettingItem>
+      <SettingItem name="结束角度">
+        <n-input-number
+          v-model:value="optionData.series[0].endAngle"
+          :min="0"
+          :step="1"
+          :max="360"
+          size="small"
+          placeholder="支持范围[0, 360]"
+        >
+          <template #suffix> ° </template>
+        </n-input-number>
+      </SettingItem>
+    </SettingItemBox>
   </CollapseItem>
 </template>
 

src/packages/components/Charts/Pies/PieCommon/config.ts

@@ -21,7 +21,7 @@ export const PieTypeObject = {
 // 其它配置
 const otherConfig = {
   // 轮播动画
-  isCarousel: false,
+  isCarousel: false
 }
 
 const option = {
@@ -42,6 +42,8 @@ const option = {
       center: ['50%', '60%'],
       roseType: false,
       avoidLabelOverlap: false,
+      startAngle: 0,
+      endAngle: 360,
       itemStyle: {
         show: true,
         borderRadius: 10,

src/packages/components/Charts/Pies/PieCommon/config.vue

@@ -113,6 +113,32 @@
         />
       </SettingItem>
     </setting-item-box>
+    <SettingItemBox name="角度">
+      <SettingItem name="起始角度">
+        <n-input-number
+          v-model:value="optionData.series[0].startAngle"
+          :min="0"
+          :step="1"
+          :max="360"
+          size="small"
+          placeholder="支持范围[0, 360]"
+        >
+          <template #suffix> ° </template>
+        </n-input-number>
+      </SettingItem>
+      <SettingItem name="结束角度">
+        <n-input-number
+          v-model:value="optionData.series[0].endAngle"
+          :min="0"
+          :step="1"
+          :max="360"
+          size="small"
+          placeholder="支持范围[0, 360]"
+        >
+          <template #suffix> ° </template>
+        </n-input-number>
+      </SettingItem>
+    </SettingItemBox>
   </CollapseItem>
 </template>