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] =?UTF-8?q?chore:=20=E5=B0=9D=E8=AF=95=E9=9B=B7=E8=BE=BE?=
 =?UTF-8?q?=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