Merge pull request #13606 from dataease/pr@dev-v2@chart-radar-style

feat(图表): 雷达图支持更改折点的显示和隐藏,以及颜色覆盖开关 #12916

core/core-frontend/src/locales/en.ts

@@ -1850,7 +1850,10 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
     full_display: 'full display',
     show_hover_style: 'show mouse hover style',
     merge_cells: 'merge cells',
-    length_limit: 'length limit'
+    length_limit: 'length limit',
+    radar_point: 'enable auxiliary points',
+    radar_point_size: 'size',
+    radar_area_color: 'enable area '
   },
   dataset: {
     scope_edit: 'only effective when editing',

core/core-frontend/src/locales/tw.ts

@@ -1810,7 +1810,10 @@ export default {
     full_display: '全量顯示',
     show_hover_style: '顯示滑鼠懸浮樣式',
     merge_cells: '合併儲存格',
-    length_limit: '長度限制'
+    length_limit: '長度限制',
+    radar_point: '開啟輔助點',
+    radar_point_size: '輔助點大小',
+    radar_area_color: '開啟面積'
   },
   dataset: {
     scope_edit: '僅編輯時生效',

core/core-frontend/src/locales/zh-CN.ts

@@ -1813,7 +1813,10 @@ export default {
     full_display: '全量显示',
     show_hover_style: '显示鼠标悬浮样式',
     merge_cells: '合并单元格',
-    length_limit: '长度限制'
+    length_limit: '长度限制',
+    radar_point: '开启辅助点',
+    radar_point_size: '辅助点大小',
+    radar_area_color: '开启面积'
   },
   dataset: {
     scope_edit: '仅编辑时生效',

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -334,6 +334,18 @@ declare interface ChartBasicStyle {
    * 最大行数
    */
   maxLines?: number
+  /**
+   * 雷达图辅助点
+   */
+  radarShowPoint: boolean
+  /**
+   * 雷达图辅助点大小
+   */
+  radarPointSize: number
+  /**
+   * 雷达图面积颜色开关
+   */
+  radarAreaColor: boolean
 }
 /**
  * 表头属性

core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue

@@ -1278,6 +1278,44 @@ onMounted(() => {
         <el-radio :effect="themes" label="circle">{{ t('chart.circle') }}</el-radio>
       </el-radio-group>
     </el-form-item>
+    <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
+      <el-checkbox
+        size="small"
+        :effect="themes"
+        v-model="state.basicStyleForm.radarShowPoint"
+        @change="changeBasicStyle('radarShowPoint')"
+      >
+        {{ $t('chart.radar_point') }}
+      </el-checkbox>
+    </el-form-item>
+    <el-form-item
+      style="padding-left: 20px"
+      class="form-item margin-bottom-8"
+      :class="'form-item-' + themes"
+      :label="t('chart.radar_point_size')"
+    >
+      <el-input-number
+        style="width: 100%"
+        :effect="themes"
+        controls-position="right"
+        size="middle"
+        :min="0"
+        :max="30"
+        :disabled="!state.basicStyleForm.radarShowPoint"
+        v-model="state.basicStyleForm.radarPointSize"
+        @change="changeBasicStyle('radarPointSize')"
+      />
+    </el-form-item>
+    <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
+      <el-checkbox
+        size="small"
+        :effect="themes"
+        v-model="state.basicStyleForm.radarAreaColor"
+        @change="changeBasicStyle('radarAreaColor')"
+      >
+        {{ $t('chart.radar_area_color') }}
+      </el-checkbox>
+    </el-form-item>
     <!--radar end-->
     <!--scatter start-->
     <el-form-item

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -1619,7 +1619,10 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
   customIcon: '',
   showHoverStyle: true,
   autoWrap: false,
-  maxLines: 3
+  maxLines: 3,
+  radarShowPoint: true,
+  radarPointSize: 4,
+  radarAreaColor: true
 }
 
 export const BASE_VIEW_CONFIG = {

core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts

@@ -74,13 +74,6 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
       yField: 'value',
       seriesField: 'category',
       appendPadding: [10, 10, 10, 10],
-      point: {
-        size: 4,
-        shape: 'circle',
-        style: {
-          fill: null
-        }
-      },
       interactions: [
         {
           type: 'legend-active',
@@ -122,6 +115,22 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
     return newChart
   }
 
+  protected configBasicStyle(chart: Chart, options: RadarOptions): RadarOptions {
+    const { radarShowPoint, radarPointSize, radarAreaColor } = parseJson(
+      chart.customAttr
+    ).basicStyle
+    const tempOptions: RadarOptions = {}
+
+    if (radarShowPoint) {
+      tempOptions['point'] = { shape: 'circle', size: radarPointSize, style: { fill: null } }
+    }
+    if (radarAreaColor) {
+      tempOptions['area'] = {}
+    }
+
+    return { ...options, ...tempOptions }
+  }
+
   protected configLabel(chart: Chart, options: RadarOptions): RadarOptions {
     const tmpOptions = super.configLabel(chart, options)
     if (!tmpOptions.label) {
@@ -266,7 +275,8 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
       this.configLabel,
       this.configLegend,
       this.configMultiSeriesTooltip,
-      this.configAxis
+      this.configAxis,
+      this.configBasicStyle
     )(chart, options)
   }