From 15e9a0c0f57833fb9f13219e021fb7ef79a26b2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Thu, 8 Sep 2022 16:07:16 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E9=9B=B7=E8=BE=BE?=
 =?UTF-8?q?=E5=9B=BE=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Charts/Mores/Radar/config.ts   |   4 +-
 .../components/Charts/Mores/Radar/config.vue  | 105 +++++++++++++++---
 .../components/Charts/Mores/Radar/data.json   |  16 +--
 .../components/Charts/Mores/Radar/index.vue   |  12 +-
 src/settings/chartThemes/global.theme.json    |   3 +-
 5 files changed, 113 insertions(+), 27 deletions(-)

diff --git a/src/packages/components/Charts/Mores/Radar/config.ts b/src/packages/components/Charts/Mores/Radar/config.ts
index 7dc5e880..46f48289 100644
--- a/src/packages/components/Charts/Mores/Radar/config.ts
+++ b/src/packages/components/Charts/Mores/Radar/config.ts
@@ -22,6 +22,8 @@ export const option = {
   dataset: { ...dataJson },
   radar: {
     shape: 'polygon',
+    radius: ['0%', '60%'],
+    center: ['50%', '55%'],
     splitArea: { show: true },
     splitLine: { show: true },
     axisName: { show: true, color: '#eee', fontSize: 12 },
@@ -31,7 +33,7 @@ export const option = {
   },
   series: [
     {
-      name: 'Budget vs spending',
+      name: 'radar',
       type: 'radar',
       areaStyle: {
         opacity: 0.1
diff --git a/src/packages/components/Charts/Mores/Radar/config.vue b/src/packages/components/Charts/Mores/Radar/config.vue
index 1db8a6be..156d3a0f 100644
--- a/src/packages/components/Charts/Mores/Radar/config.vue
+++ b/src/packages/components/Charts/Mores/Radar/config.vue
@@ -2,6 +2,7 @@
   <div>
     <!-- Echarts 全局设置 -->
     <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+
     <CollapseItem name="雷达" :expanded="true">
       <SettingItemBox name="样式">
         <SettingItem>
@@ -11,9 +12,65 @@
           <n-checkbox v-model:checked="radarConfig.splitLine.show">分割线</n-checkbox>
         </SettingItem>
         <SettingItem name="雷达形状">
-          <n-select v-model:value="radarConfig.shape" :options="RadarShapeEnumList" placeholder="选择形状" />
+          <n-select v-model:value="radarConfig.shape" size="small" :options="RadarShapeEnumList" placeholder="选择形状" />
         </SettingItem>
       </SettingItemBox>
+      
+      <SettingItemBox name="坐标轴">
+        <SettingItem>
+          <n-checkbox v-model:checked="radarConfig.axisLine.show">轴线</n-checkbox>
+        </SettingItem>
+        <SettingItem>
+          <n-checkbox v-model:checked="radarConfig.axisTick.show">刻度</n-checkbox>
+        </SettingItem>
+      </SettingItemBox>
+
+      <SettingItemBox name="范围">
+        <setting-item :name="`最小值：${radarProp.radius[0]}%`">
+          <!-- 透明度 -->
+          <n-slider
+            v-model:value="radarProp.radius[0]"
+            :min="0"
+            :max="100"
+            :format-tooltip="sliderFormatTooltip"
+            @update:value="updateRadius0"
+          ></n-slider>
+        </setting-item>
+        <setting-item :name="`最大值：${radarProp.radius[1]}%`">
+          <!-- 透明度 -->
+          <n-slider
+            v-model:value="radarProp.radius[1]"
+            :min="0"
+            :max="100"
+            :format-tooltip="sliderFormatTooltip"
+            @update:value="updateRadius1"
+          ></n-slider>
+        </setting-item>
+      </SettingItemBox>
+      
+      <SettingItemBox name="偏移">
+        <setting-item :name="`X 轴值：${radarProp.center[0]}%`">
+          <!-- 透明度 -->
+          <n-slider
+            v-model:value="radarProp.center[0]"
+            :min="0"
+            :max="100"
+            :format-tooltip="sliderFormatTooltip"
+            @update:value="updateCenter0"
+          ></n-slider>
+        </setting-item>
+        <setting-item :name="`Y 轴值：${radarProp.center[1]}%`">
+          <!-- 透明度 -->
+          <n-slider
+            v-model:value="radarProp.center[1]"
+            :min="0"
+            :max="100"
+            :format-tooltip="sliderFormatTooltip"
+            @update:value="updateCenter1"
+          ></n-slider>
+        </setting-item>
+      </SettingItemBox>
+
       <SettingItemBox name="指示器">
         <SettingItem name="颜色">
           <n-color-picker size="small" :modes="['hex']" v-model:value="radarConfig.axisName.color"></n-color-picker>
@@ -25,14 +82,7 @@
           <n-checkbox v-model:checked="radarConfig.axisName.show">文字标签</n-checkbox>
         </SettingItem>
       </SettingItemBox>
-      <SettingItemBox name="坐标轴">
-        <SettingItem>
-          <n-checkbox v-model:checked="radarConfig.axisLine.show">轴线</n-checkbox>
-        </SettingItem>
-        <SettingItem>
-          <n-checkbox v-model:checked="radarConfig.axisTick.show">刻度</n-checkbox>
-        </SettingItem>
-      </SettingItemBox>
+
       <SettingItemBox name="系列" :alone="true">
         <SettingItem name="背景透明度">
           <n-input-number
@@ -49,19 +99,46 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, reactive } from 'vue'
 import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import { RadarShapeEnumList } from './config'
+import { option, RadarShapeEnumList } from './config'
 
 const props = defineProps({
   optionData: {
-    type: Object as PropType<GlobalThemeJsonType>,
+    type: Object as PropType<typeof option>,
     required: true
   }
 })
 
-const radarConfig = computed(() => {
+const radarConfig = computed<typeof option.radar>(() => {
   return props.optionData.radar
 })
+
+const radarProp = reactive({
+  radius: [0, 60],
+  center: [50, 50]
+})
+
+// 更新处理
+const updateRadius0 = (value: number) => {
+  props.optionData.radar.radius[0] = `${value}%`
+}
+
+const updateRadius1 = (value: number) => {
+  props.optionData.radar.radius[1] = `${value}%`
+}
+
+// 更新处理
+const updateCenter0 = (value: number) => {
+  props.optionData.radar.center[0] = `${value}%`
+}
+
+const updateCenter1 = (value: number) => {
+  props.optionData.radar.center[1] = `${value}%`
+}
+
+// 百分比格式化 percent
+const sliderFormatTooltip = (v: number) => {
+  return `${v}%`
+}
 </script>
diff --git a/src/packages/components/Charts/Mores/Radar/data.json b/src/packages/components/Charts/Mores/Radar/data.json
index 612a97fc..74574954 100644
--- a/src/packages/components/Charts/Mores/Radar/data.json
+++ b/src/packages/components/Charts/Mores/Radar/data.json
@@ -1,20 +1,20 @@
 {
   "radarIndicator": [
-    { "name": "Sales", "max": 6500 },
-    { "name": "Administration", "max": 16000 },
-    { "name": "Information Technology", "max": 30000 },
-    { "name": "Customer Support", "max": 38000 },
-    { "name": "Development", "max": 52000 },
-    { "name": "Marketing", "max": 25000 }
+    { "name": "数据1", "max": 6500 },
+    { "name": "数据2", "max": 16000 },
+    { "name": "数据3", "max": 30000 },
+    { "name": "数据4", "max": 38000 },
+    { "name": "数据5", "max": 52000 },
+    { "name": "数据6", "max": 25000 }
   ],
   "seriesData": [
     {
       "value": [4200, 3000, 20000, 35000, 50000, 18000],
-      "name": "Allocated Budget"
+      "name": "data1"
     },
     {
       "value": [5000, 14000, 28000, 26000, 42000, 21000],
-      "name": "Actual Spending"
+      "name": "data2"
     }
   ]
 }
diff --git a/src/packages/components/Charts/Mores/Radar/index.vue b/src/packages/components/Charts/Mores/Radar/index.vue
index 912d27e6..d39e0fed 100644
--- a/src/packages/components/Charts/Mores/Radar/index.vue
+++ b/src/packages/components/Charts/Mores/Radar/index.vue
@@ -38,9 +38,15 @@ const option = computed(() => {
 })
 
 const dataSetHandle = (dataset: any) => {
-  props.chartConfig.option.legend.data = dataset.seriesData.map(i => i.name)
-  props.chartConfig.option.radar.indicator = dataset.radarIndicator
-  props.chartConfig.option.series[0].data = dataset.seriesData
+  if (props.chartConfig.option.legend && dataset.seriesData) {
+    props.chartConfig.option.legend.data = dataset.seriesData.map((i: { name: string }) => i.name)
+  }
+  if (dataset.radarIndicator) {
+    props.chartConfig.option.radar.indicator = dataset.radarIndicator
+  }
+  if (dataset.seriesData) {
+    props.chartConfig.option.series[0].data = dataset.seriesData
+  }
 }
 
 watch(
diff --git a/src/settings/chartThemes/global.theme.json b/src/settings/chartThemes/global.theme.json
index d7b2a61f..44245e3e 100644
--- a/src/settings/chartThemes/global.theme.json
+++ b/src/settings/chartThemes/global.theme.json
@@ -86,6 +86,7 @@
     "top": "5%",
     "textStyle": {
       "color": "#B9B8CE"
-    }
+    },
+    "data": []
   }
 }
\ No newline at end of file