Merge pull request #12947 from dataease/pr@dev-v2@chart-radar-feat

feat(图表): 雷达图坐标轴轴值支持自定义 #12637

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

@@ -272,6 +272,10 @@ declare interface ChartMiscStyle {
   axisLabel: SplitAxisLabel
   splitLine: SplitAxisLine
   splitArea: SplitSplitArea
+  /**
+   *  轴值设置
+   */
+  axisValue: AxisValue
 }
 declare interface SplitLineStyle {
   color: string

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

@@ -2,6 +2,7 @@
 import { computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_MISC_STYLE } from '@/views/chart/components/editor/util/chart'
+import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 
 const { t } = useI18n()
 
@@ -14,6 +15,10 @@ const props = withDefaults(
   { themes: 'dark' }
 )
 
+const toolTip = computed(() => {
+  return props.themes === 'dark' ? 'ndark' : 'dark'
+})
+
 const predefineColors = COLOR_PANEL
 
 const state = reactive({
@@ -57,6 +62,9 @@ const init = () => {
     }
     if (customStyle.xAxis) {
       state.miscForm = customStyle.misc
+      if (!state.miscForm.axisValue) {
+        state.miscForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_MISC_STYLE)).axisValue
+      }
     }
   }
 }
@@ -138,6 +146,89 @@ onMounted(() => {
         @change="changeMiscStyle('axisColor')"
       />
     </el-form-item>
+    <template v-if="showProperty('axisValue')">
+      <div
+        style="display: flex; flex-direction: row; justify-content: space-between; padding: 8px 0"
+      >
+        <label class="custom-form-item-label" :class="'custom-form-item-label--' + themes">
+          {{ t('chart.axis_value') }}
+          <el-tooltip class="item" :effect="toolTip" placement="top">
+            <template #content><span v-html="t('chart.axis_tip')"></span></template>
+            <span style="vertical-align: middle">
+              <el-icon style="cursor: pointer">
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
+              </el-icon>
+            </span>
+          </el-tooltip>
+        </label>
+
+        <el-form-item class="form-item" :class="'form-item-' + themes">
+          <el-checkbox
+            size="small"
+            :effect="props.themes"
+            v-model="state.miscForm.axisValue.auto"
+            @change="changeMiscStyle('axisValue.auto')"
+          >
+            {{ t('chart.axis_auto') }}
+          </el-checkbox>
+        </el-form-item>
+      </div>
+
+      <template v-if="showProperty('axisValue') && !state.miscForm.axisValue.auto">
+        <el-row :gutter="8">
+          <el-col :span="12">
+            <el-form-item
+              class="form-item"
+              :class="'form-item-' + themes"
+              :label="t('chart.axis_value_max')"
+            >
+              <el-input-number
+                controls-position="right"
+                :effect="props.themes"
+                v-model.number="state.miscForm.axisValue.max"
+                @change="changeMiscStyle('axisValue.max')"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              class="form-item"
+              :class="'form-item-' + themes"
+              :label="t('chart.axis_value_min')"
+            >
+              <el-input-number
+                :effect="props.themes"
+                controls-position="right"
+                v-model.number="state.miscForm.axisValue.min"
+                @change="changeMiscStyle('axisValue.min')"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <label class="custom-form-item-label" :class="'custom-form-item-label--' + themes">
+          {{ t('chart.axis_value_split_count') }}
+          <el-tooltip class="item" :effect="toolTip" placement="top">
+            <template #content>期望的坐标轴刻度数量，非最终结果。</template>
+            <span style="vertical-align: middle">
+              <el-icon style="cursor: pointer">
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
+              </el-icon>
+            </span>
+          </el-tooltip>
+        </label>
+
+        <el-form-item class="form-item" :class="'form-item-' + themes">
+          <el-input-number
+            style="width: 100%"
+            :effect="props.themes"
+            controls-position="right"
+            v-model.number="state.miscForm.axisValue.splitCount"
+            @change="changeMiscStyle('axisValue.splitCount')"
+          />
+        </el-form-item>
+      </template>
+    </template>
   </el-form>
 </template>
 
@@ -145,4 +236,17 @@ onMounted(() => {
 .form-item-checkbox {
   margin-bottom: 0 !important;
 }
+.custom-form-item-label {
+  margin-bottom: 4px;
+  line-height: 20px;
+  color: #646a73;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  padding: 2px 12px 0 0;
+
+  &.custom-form-item-label--dark {
+    color: #a6a6a6;
+  }
+}
 </style>

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

@@ -731,6 +731,13 @@ export const DEFAULT_MISC_STYLE: ChartMiscStyle = {
   },
   splitArea: {
     show: true
+  },
+  axisValue: {
+    auto: true,
+    min: 10,
+    max: 100,
+    split: 10,
+    splitCount: 10
   }
 }
 export const DEFAULT_FUNCTION_CFG: ChartFunctionCfg = {

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

@@ -27,7 +27,7 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
     'basic-style-selector': ['colors', 'alpha', 'radarShape', 'seriesColor'],
     'label-selector': ['seriesLabelFormatter'],
     'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
-    'misc-style-selector': ['showName', 'color', 'fontSize', 'axisColor'],
+    'misc-style-selector': ['showName', 'color', 'fontSize', 'axisColor', 'axisValue'],
     'title-selector': [
       'show',
       'title',
@@ -213,6 +213,22 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
         }
       }
     }
+    const axisValue = misc.axisValue
+    if (!axisValue?.auto) {
+      const axisYAxis = {
+        ...yAxis,
+        min: axisValue.min,
+        max: axisValue.max,
+        minLimit: axisValue.min,
+        maxLimit: axisValue.max,
+        tickCount: axisValue.splitCount
+      }
+      return {
+        ...options,
+        xAxis,
+        yAxis: axisYAxis
+      }
+    }
     return {
       ...options,
       xAxis,