fix: 完成属性面板功能

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
+    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
   },
-  dataset: { ...dataJson },
   series: [
     {
+      name: 'Budget vs spending',
       type: 'radar',
-      barWidth: null,
-      itemStyle: {
-        color: null,
-        borderRadius: 0
-      }
+      areaStyle: {
+        opacity: 0.1
+      },
+      data: dataJson.seriesData
     }
   ]
 }

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>

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 },