From 21ade49063a0fa564e33ffbfbaaa7f63b43e8c2d Mon Sep 17 00:00:00 2001
From: ryker <1132969953@qq.com>
Date: Mon, 13 Jun 2022 15:06:51 +0800
Subject: [PATCH] =?UTF-8?q?fit:=20=E9=A5=BC=E5=9B=BE=E7=9A=84=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B9-=E5=8D=8A=E5=BE=84=E3=80=81=E8=BE=B9?=
 =?UTF-8?q?=E6=A1=86=E3=80=81=E9=98=B4=E5=BD=B1=E3=80=81=E6=89=87=E5=8C=BA?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E8=87=AA=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Pies/PieCommon/config.ts           | 11 ++-
 .../Charts/Pies/PieCommon/config.vue          | 83 ++++++++++++++++++-
 2 files changed, 86 insertions(+), 8 deletions(-)

diff --git a/src/packages/components/Charts/Pies/PieCommon/config.ts b/src/packages/components/Charts/Pies/PieCommon/config.ts
index aae690c2..84bba272 100644
--- a/src/packages/components/Charts/Pies/PieCommon/config.ts
+++ b/src/packages/components/Charts/Pies/PieCommon/config.ts
@@ -5,7 +5,7 @@ import dataJson from './data.json'
 
 export const includes = ['legend']
 
-const option = {
+export const option = {
   tooltip: {
     show: true,
     trigger: 'item'
@@ -17,14 +17,17 @@ const option = {
   series: [
     {
       type: 'pie',
-      radius: ['40%', '65%'],
+      radius: [40, 65],
       center: ['50%', '60%'],
-      avoidLabelOverlap: false,
+      color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
       itemStyle: {
         show: true,
         borderRadius: 10,
         borderColor: '#fff',
-        borderWidth: 2
+        borderWidth: 2,
+        borderType: 'solid',
+        shadowBlur: 10,
+        shadowColor: "#97e2f5"
       },
       label: {
         show: false,
diff --git a/src/packages/components/Charts/Pies/PieCommon/config.vue b/src/packages/components/Charts/Pies/PieCommon/config.vue
index e0ecff16..9329aeb0 100644
--- a/src/packages/components/Charts/Pies/PieCommon/config.vue
+++ b/src/packages/components/Charts/Pies/PieCommon/config.vue
@@ -1,12 +1,68 @@
 <template>
-  <!-- Echarts 全局设置 -->
-  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`圆环-${index + 1}`" :expanded="true">
+    <SettingItemBox name="半径">
+      <SettingItem name="内半径">
+        <n-input-number v-model:value="item.radius[0]" :min="0" :step="1" size="small" placeholder="内半径">
+        </n-input-number>
+      </SettingItem>
+      <SettingItem name="外半径">
+        <n-input-number v-model:value="item.radius[1]" :min="0" :step="1" size="small" placeholder="外半径">
+        </n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="边框">
+      <SettingItem name="半径">
+        <n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" :step="1" size="small" placeholder="边框半径">
+        </n-input-number>
+      </SettingItem>
+      <SettingItem name="宽度">
+        <n-input-number v-model:value="item.itemStyle.borderWidth" :min="0" :step="1" size="small" placeholder="边框宽度">
+        </n-input-number>
+      </SettingItem>
+      <SettingItem name="样式">
+        <n-select v-model:value="item.itemStyle.borderType" :options="borderTypes" placeholder="选择边框样式" />
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.borderColor"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="阴影">
+      <SettingItem name="模糊级数">
+        <n-input-number v-model:value="item.itemStyle.shadowBlur" :min="0" :step="1" size="small" placeholder="阴影范围">
+        </n-input-number>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.shadowColor"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="扇区颜色">
+      <SettingItem :name="'颜色' + index" v-for="(_, index) in item.color">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.color[index]"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.series[0].color = option.series[0].color"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <!-- Echarts 全局设置 -->
+    <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, computed } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
+import {
+  GlobalSetting,
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
 
 const props = defineProps({
   optionData: {
@@ -14,4 +70,23 @@ const props = defineProps({
     required: true
   }
 })
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+
+const borderTypes = [
+  {
+    label: '实线',
+    value: 'solid'
+  },
+  {
+    label: '虚线',
+    value: 'dashed'
+  },
+  {
+    label: '点状',
+    value: 'dotted'
+  }
+]
 </script>