From a2389a5d99e456f73457d5c3c2a7423412c95fe7 Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Wed, 7 Sep 2022 10:44:01 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=8C=E6=88=90=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Charts/Mores/Radar/config.ts   | 30 ++++++---
 .../components/Charts/Mores/Radar/config.vue  | 61 +++++++++++++++++++
 .../components/Charts/Mores/Radar/data.json   |  1 -
 3 files changed, 82 insertions(+), 10 deletions(-)

diff --git a/src/packages/components/Charts/Mores/Radar/config.ts b/src/packages/components/Charts/Mores/Radar/config.ts
index d259d4f9..7dc5e880 100644
--- a/src/packages/components/Charts/Mores/Radar/config.ts
+++ b/src/packages/components/Charts/Mores/Radar/config.ts
@@ -6,25 +6,37 @@ import dataJson from './data.json'
 
 export const includes = ['legend']
 
+// 雷达形状
+export const RadarShapeEnumList = [
+  { label: '多边形', value: 'polygon' },
+  { label: '圆形', value: 'circle' }
+]
+
 export const option = {
   tooltip: {
     show: true
   },
   legend: {
-    show: true
-  },
-  radar: {
-    indicator: dataJson.radarIndicator
+    data: dataJson.seriesData.map(i => i.name)
   },
   dataset: { ...dataJson },
+  radar: {
+    shape: 'polygon',
+    splitArea: { show: true },
+    splitLine: { show: true },
+    axisName: { show: true, color: '#eee', fontSize: 12 },
+    axisLine: { show: true },
+    axisTick: { show: true },
+    indicator: dataJson.radarIndicator
+  },
   series: [
     {
+      name: 'Budget vs spending',
       type: 'radar',
-      barWidth: null,
-      itemStyle: {
-        color: null,
-        borderRadius: 0
-      }
+      areaStyle: {
+        opacity: 0.1
+      },
+      data: dataJson.seriesData
     }
   ]
 }
diff --git a/src/packages/components/Charts/Mores/Radar/config.vue b/src/packages/components/Charts/Mores/Radar/config.vue
index 44a7bc22..1db8a6be 100644
--- a/src/packages/components/Charts/Mores/Radar/config.vue
+++ b/src/packages/components/Charts/Mores/Radar/config.vue
@@ -1,6 +1,67 @@
 <template>
+  <div>
+    <!-- Echarts 全局设置 -->
+    <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+    <CollapseItem name="雷达" :expanded="true">
+      <SettingItemBox name="样式">
+        <SettingItem>
+          <n-checkbox v-model:checked="radarConfig.splitArea.show">背景</n-checkbox>
+        </SettingItem>
+        <SettingItem>
+          <n-checkbox v-model:checked="radarConfig.splitLine.show">分割线</n-checkbox>
+        </SettingItem>
+        <SettingItem name="雷达形状">
+          <n-select v-model:value="radarConfig.shape" :options="RadarShapeEnumList" placeholder="选择形状" />
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="指示器">
+        <SettingItem name="颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="radarConfig.axisName.color"></n-color-picker>
+        </SettingItem>
+        <SettingItem name="大小">
+          <n-input-number v-model:value="radarConfig.axisName.fontSize" size="small" :min="9"></n-input-number>
+        </SettingItem>
+        <SettingItem>
+          <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
+            v-model:value="optionData.series[0].areaStyle.opacity"
+            size="small"
+            :min="0"
+            :max="1"
+            :step="0.1"
+          ></n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { RadarShapeEnumList } from './config'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const radarConfig = computed(() => {
+  return props.optionData.radar
+})
 </script>
diff --git a/src/packages/components/Charts/Mores/Radar/data.json b/src/packages/components/Charts/Mores/Radar/data.json
index e3ab2427..612a97fc 100644
--- a/src/packages/components/Charts/Mores/Radar/data.json
+++ b/src/packages/components/Charts/Mores/Radar/data.json
@@ -1,5 +1,4 @@
 {
-  "legendData": ["Allocated Budget", "Actual Spending"],
   "radarIndicator": [
     { "name": "Sales", "max": 6500 },
     { "name": "Administration", "max": 16000 },