!40 feat: 完善雷达组件

Merge pull request !40 from dodu/dev-commet

src/packages/components/Charts/Mores/Radar/config.ts

@@ -0,0 +1,49 @@
+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 RadarShapeEnumList = [
+  { label: '多边形', value: 'polygon' },
+  { label: '圆形', value: 'circle' }
+]
+
+export const option = {
+  tooltip: {
+    show: true
+  },
+  legend: {
+    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',
+      areaStyle: {
+        opacity: 0.1
+      },
+      data: dataJson.seriesData
+    }
+  ]
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = RadarConfig.key
+  public chartConfig = cloneDeep(RadarConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

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

@@ -0,0 +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 }
+  ],
+  "seriesData": [
+    {
+      "value": [4200, 3000, 20000, 35000, 50000, 18000],
+      "name": "Allocated Budget"
+    },
+    {
+      "value": [5000, 14000, 28000, 26000, 42000, 21000],
+      "name": "Actual Spending"
+    }
+  ]
+}

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.COMMON,
   image
 }

src/packages/components/Charts/Mores/Radar/index.vue

@@ -1,13 +1,59 @@
 <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, watch } 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 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>
-
-<style lang="scss" scoped>
-
-</style>