perf: 优化雷达图展示

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

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>

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"
     }
   ]
 }

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(

src/settings/chartThemes/global.theme.json

@@ -86,6 +86,7 @@
     "top": "5%",
     "textStyle": {
       "color": "#B9B8CE"
-    }
+    },
+    "data": []
   }
 }