From 87d5c9ffb779cf9a2cd72924ef66fe85ce1a77a8 Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Tue, 6 Sep 2022 15:01:44 +0800
Subject: [PATCH 1/4] =?UTF-8?q?chore:=20=E5=9B=9E=E5=A4=8D=E4=B8=8E?=
 =?UTF-8?q?=E7=BA=BF=E4=B8=8Adev=E6=96=87=E4=BB=B6=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                       | 6 ++----
 src/store/modules/chartEditStore/chartEditStore.ts | 2 +-
 src/views/chart/hooks/useSync.hook.ts              | 2 +-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index c4b0e1c3..e5a71466 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,7 @@
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
     "new": "plop --plopfile ./plop/plopfile.js",
-    "postinstall": "husky install",
-    "lint": "eslint --ext .vue,.js,.jsx,.ts,.tsx ./ --max-warnings 0",
-    "lint:fix": "eslint --ext .vue,.js,jsx,.ts,.tsx ./ --fix"
+    "postinstall": "husky install"
   },
   "dependencies": {
     "@types/color": "^3.0.3",
@@ -71,4 +69,4 @@
     "vue-echarts": "^6.0.2",
     "vue-tsc": "^0.28.10"
   }
-}
+}
\ No newline at end of file
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index a2be5775..bd2f70ba 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -600,7 +600,7 @@ export const useChartEditStore = defineStore({
               ids.push(item.id)
             })
           } else {
-            (historyData[0] as CreateComponentGroupType).groupList.forEach(item => {
+            ;(historyData[0] as CreateComponentGroupType).groupList.forEach(item => {
               ids.push(item.id)
             })
           }
diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts
index a448f0e7..09a26aa9 100644
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/src/views/chart/hooks/useSync.hook.ts
@@ -35,7 +35,7 @@ export const useSync = () => {
       }
 
       if (e.isGroup) {
-        (e as CreateComponentGroupType).groupList.forEach(groupItem => {
+        ;(e as CreateComponentGroupType).groupList.forEach(groupItem => {
           intComponent(groupItem)
         })
       } else {

From 7cac99dd80252b12d6f6099164dd7f19d0d82ddb Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Tue, 6 Sep 2022 15:52:41 +0800
Subject: [PATCH 2/4] =?UTF-8?q?chore:=20=E5=B0=9D=E8=AF=95=E9=9B=B7?=
 =?UTF-8?q?=E8=BE=BE=E5=9B=BE=E7=BB=84=E4=BB=B6=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Charts/Mores/Radar/config.ts   | 37 ++++++++++++++++
 .../components/Charts/Mores/Radar/data.json   | 21 ++++++++++
 .../components/Charts/Mores/Radar/index.ts    |  3 +-
 .../components/Charts/Mores/Radar/index.vue   | 42 +++++++++++++++----
 4 files changed, 95 insertions(+), 8 deletions(-)
 create mode 100644 src/packages/components/Charts/Mores/Radar/config.ts
 create mode 100644 src/packages/components/Charts/Mores/Radar/data.json

diff --git a/src/packages/components/Charts/Mores/Radar/config.ts b/src/packages/components/Charts/Mores/Radar/config.ts
new file mode 100644
index 00000000..d259d4f9
--- /dev/null
+++ b/src/packages/components/Charts/Mores/Radar/config.ts
@@ -0,0 +1,37 @@
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { RadarConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend']
+
+export const option = {
+  tooltip: {
+    show: true
+  },
+  legend: {
+    show: true
+  },
+  radar: {
+    indicator: dataJson.radarIndicator
+  },
+  dataset: { ...dataJson },
+  series: [
+    {
+      type: 'radar',
+      barWidth: null,
+      itemStyle: {
+        color: null,
+        borderRadius: 0
+      }
+    }
+  ]
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = RadarConfig.key
+  public chartConfig = cloneDeep(RadarConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}
diff --git a/src/packages/components/Charts/Mores/Radar/data.json b/src/packages/components/Charts/Mores/Radar/data.json
new file mode 100644
index 00000000..e3ab2427
--- /dev/null
+++ b/src/packages/components/Charts/Mores/Radar/data.json
@@ -0,0 +1,21 @@
+{
+  "legendData": ["Allocated Budget", "Actual Spending"],
+  "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 }
+  ],
+  "seriesData": [
+    {
+      "value": [4200, 3000, 20000, 35000, 50000, 18000],
+      "name": "Allocated Budget"
+    },
+    {
+      "value": [5000, 14000, 28000, 26000, 42000, 21000],
+      "name": "Actual Spending"
+    }
+  ]
+}
diff --git a/src/packages/components/Charts/Mores/Radar/index.ts b/src/packages/components/Charts/Mores/Radar/index.ts
index 8b330e3c..1495e57c 100644
--- a/src/packages/components/Charts/Mores/Radar/index.ts
+++ b/src/packages/components/Charts/Mores/Radar/index.ts
@@ -1,5 +1,5 @@
 import image from '@/assets/images/chart/charts/radar.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const RadarConfig: ConfigType = {
@@ -10,5 +10,6 @@ export const RadarConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
   image
 }
diff --git a/src/packages/components/Charts/Mores/Radar/index.vue b/src/packages/components/Charts/Mores/Radar/index.vue
index 31fe77be..f26be324 100644
--- a/src/packages/components/Charts/Mores/Radar/index.vue
+++ b/src/packages/components/Charts/Mores/Radar/index.vue
@@ -1,13 +1,41 @@
 <template>
-  <div>
-    水波
-  </div>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
+import { computed, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { RadarChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file

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 3/4] =?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 },

From 94295a35bca075ae8560d26482cb8d9307e8ae09 Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Wed, 7 Sep 2022 11:22:13 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E5=AE=8C=E6=88=90=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7,=E6=9B=B4=E6=96=B0=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Charts/Mores/Radar/index.ts    |  2 +-
 .../components/Charts/Mores/Radar/index.vue   | 22 +++++++++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/packages/components/Charts/Mores/Radar/index.ts b/src/packages/components/Charts/Mores/Radar/index.ts
index 1495e57c..006f2e5d 100644
--- a/src/packages/components/Charts/Mores/Radar/index.ts
+++ b/src/packages/components/Charts/Mores/Radar/index.ts
@@ -10,6 +10,6 @@ export const RadarConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
-  chartFrame: ChartFrameEnum.ECHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
   image
 }
diff --git a/src/packages/components/Charts/Mores/Radar/index.vue b/src/packages/components/Charts/Mores/Radar/index.vue
index f26be324..912d27e6 100644
--- a/src/packages/components/Charts/Mores/Radar/index.vue
+++ b/src/packages/components/Charts/Mores/Radar/index.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed, PropType, watch } from 'vue'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -37,5 +37,23 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+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
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    dataSetHandle(newData)
+  },
+  {
+    immediate: true
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  dataSetHandle(newData)
+})
 </script>