feat: 补充图表类型-雷达图

src/configs/chart.ts

@@ -31,6 +31,11 @@ export const CHART_DEFAULT_DATA: { [key: string]: ChartData } = {
     legends: ['系列1', '系列2'],
     series: [[12, 19, 5, 2, 18], [7, 11, 13, 21, 9]],
   },
+  'radar': {
+    labels: ['类别1', '类别2', '类别3', '类别4', '类别5'],
+    legends: ['系列1', '系列2'],
+    series: [[12, 19, 5, 2, 18], [7, 11, 13, 21, 9]],
+  },
   'scatter': {
     labels: ['坐标1', '坐标2', '坐标3', '坐标4', '坐标5'],
     legends: ['X', 'Y'],

src/hooks/useExport.ts

@@ -674,6 +674,9 @@ export default () => {
           else if (el.chartType === 'area') {
             type = pptx.ChartType.area
           }
+          else if (el.chartType === 'radar') {
+            type = pptx.ChartType.radar
+          }
           else if (el.chartType === 'scatter') {
             type = pptx.ChartType.scatter
             options.lineSize = 0

src/hooks/useImport.ts

@@ -428,6 +428,9 @@ export default () => {
                 case 'pie3DChart':
                   chartType = 'pie'
                   break
+                case 'radarChart':
+                  chartType = 'radar'
+                  break
                 case 'doughnutChart':
                   chartType = 'ring'
                   break

src/plugins/icon.ts

@@ -64,6 +64,7 @@ import {
   ChartScatter,
   ChartLine,
   ChartPie,
+  RadarChart,
   Text,
   Rotate,
   LeftTwo,
@@ -192,6 +193,7 @@ export const icons: Icons = {
   IconChartScatter: ChartScatter,
   IconChartLine: ChartLine,
   IconChartPie: ChartPie,
+  IconRadarChart: RadarChart,
   IconText: Text,
   IconRotate: Rotate,
   IconLeftTwo: LeftTwo,

src/types/slides.ts

@@ -393,7 +393,7 @@ export interface PPTLineElement extends Omit<PPTBaseElement, 'height' | 'rotate'
 }
 
 
-export type ChartType = 'bar' | 'column' | 'line' | 'pie' | 'ring' | 'area' | 'scatter'
+export type ChartType = 'bar' | 'column' | 'line' | 'pie' | 'ring' | 'area' | 'radar' | 'scatter'
 
 export interface ChartOptions {
   lineSmooth?: boolean

src/views/Editor/CanvasTool/ChartPool.vue

@@ -9,6 +9,7 @@
         <IconChartLineArea size="24" v-else-if="chart === 'area'" />
         <IconChartRing size="24" v-else-if="chart === 'ring'" />
         <IconChartScatter size="24" v-else-if="chart === 'scatter'" />
+        <IconRadarChart size="23" v-else-if="chart === 'radar'" />
       </div>
     </li>
   </ul>
@@ -21,7 +22,7 @@ const emit = defineEmits<{
   (event: 'select', payload: ChartType): void
 }>()
 
-const chartList: ChartType[] = ['bar', 'column', 'line', 'area', 'scatter', 'pie', 'ring']
+const chartList: ChartType[] = ['bar', 'column', 'line', 'area', 'scatter', 'radar', 'pie', 'ring']
 
 const selectChart = (chart: ChartType) => {
   emit('select', chart)

src/views/components/element/ChartElement/chartOption.ts

@@ -258,6 +258,42 @@ export const getChartOption = ({
       }),
     }
   }
+  if(type === 'radar') {
+    // indicator 中不设置max时显示异常，设置max后控制台警告，无解，等EChart官方修复此bug
+    // const values: number[] = []
+    // for (const item of data.series) {
+    //   values.push(...item)
+    // }
+    // const max = Math.max(...values)
+
+    return {
+      color: themeColors,
+      textStyle: textColor ? {
+        color: textColor,
+      } : {},
+      tooltip: {
+        trigger: 'item',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      legend: data.series.length > 1 ? {
+        top: 'bottom',
+        textStyle: textColor ? {
+          color: textColor,
+        } : {},
+      } : undefined,
+      radar: {
+        indicator: data.labels.map(item => ({ name: item })),
+      },
+      series: [
+        {
+          data: data.series.map((item, index) => ({ value: item, name: data.legends[index] })),
+          type: 'radar',
+        },
+      ],
+    }
+  }
   if(type === 'scatter') {
     const formatedData = []
     for(let i = 0; i < data.series[0].length; i++) {