feat(图表): 横纵轴支持轴名称快捷启用禁用

#14120
2026-05-16 05:50:45 +08:00 · 2025-02-19 16:27:36 +08:00
parent ad35b02430
commit b349014c2a
9 changed files with 195 additions and 149 deletions
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -1436,6 +1436,7 @@ export default {
    table_item_height: 'Table row height',
    text: 'Text',
    axis_show: 'Axis display',
+    axis_nameShow: 'Axis name display',
    axis_color: 'Axis color',
    axis_width: 'Axis width',
    axis_type: 'Axis type',
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -1403,6 +1403,7 @@ export default {
    table_item_height: '表格行高',
    text: '文字',
    axis_show: '軸線顯示',
+    axis_nameShow: '軸名稱顯示',
    axis_color: '軸線顏色',
    axis_width: '軸線寬度',
    axis_type: '軸線類型',
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -1413,6 +1413,7 @@ export default {
    table_item_height: '表格行高',
    text: '文本',
    axis_show: '轴线显示',
+    axis_nameShow: '轴名称显示',
    axis_color: '轴线颜色',
    axis_width: '轴线宽度',
    axis_type: '轴线类型',
--- a/core/core-frontend/src/models/chart/chart-style.d.ts
+++ b/core/core-frontend/src/models/chart/chart-style.d.ts
@@ -137,6 +137,10 @@ declare interface ChartAxisStyle {
   * 轴线位置
   */
  position: string
+  /**
+   * 是否显示轴线标题名称
+   */
+  nameShow: boolean
  /**
   * 轴线标题名称
   */
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue
@@ -135,65 +135,76 @@ onMounted(() => {
        </div>
      </el-radio-group>
    </el-form-item>
-    <el-form-item
-      class="form-item"
-      :class="'form-item-' + themes"
-      :label="t('chart.name')"
-      v-if="showProperty('name')"
-    >
-      <el-input
-        :effect="props.themes"
-        v-model="state.axisForm.name"
+    <el-form-item class="form-item" :class="'form-item-' + themes">
+      <el-checkbox
        size="small"
-        maxlength="50"
-        @blur="changeAxisStyle('name')"
-      />
+        :effect="props.themes"
+        v-model="state.axisForm.nameShow"
+        @change="changeAxisStyle('nameShow')"
+      >
+        {{ t('chart.axis_nameShow') }}
+      </el-checkbox>
    </el-form-item>
-
-    <label class="custom-form-item-label" :class="'custom-form-item-label--' + themes"
-      >{{ t('chart.name') }}{{ t('chart.text') }}</label
-    >
-    <div style="display: flex">
+    <div style="margin-left: 22px">
      <el-form-item
        class="form-item"
        :class="'form-item-' + themes"
-        v-if="showProperty('color')"
-        style="padding-right: 4px"
+        :label="t('chart.name')"
+        v-if="showProperty('name')"
      >
-        <el-color-picker
-          v-model="state.axisForm.color"
-          class="color-picker-style"
-          :predefine="predefineColors"
-          @change="changeAxisStyle('color')"
-          :effect="themes"
-          is-custom
+        <el-input
+          :effect="props.themes"
+          v-model="state.axisForm.name"
+          size="small"
+          maxlength="50"
+          @blur="changeAxisStyle('name')"
        />
      </el-form-item>
-      <el-form-item
-        class="form-item"
-        :class="'form-item-' + themes"
-        v-if="showProperty('fontSize')"
-        style="padding-left: 4px"
-      >
-        <el-tooltip :content="t('chart.font_size')" :effect="toolTip" placement="top">
-          <el-select
-            style="width: 108px"
-            :effect="props.themes"
-            v-model="state.axisForm.fontSize"
-            :placeholder="t('chart.axis_name_fontsize')"
-            @change="changeAxisStyle('fontSize')"
-          >
-            <el-option
-              v-for="option in fontSizeList"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-tooltip>
-      </el-form-item>
-    </div>

+      <label class="custom-form-item-label" :class="'custom-form-item-label--' + themes"
+        >{{ t('chart.name') }}{{ t('chart.text') }}</label
+      >
+      <div style="display: flex">
+        <el-form-item
+          class="form-item"
+          :class="'form-item-' + themes"
+          v-if="showProperty('color')"
+          style="padding-right: 4px"
+        >
+          <el-color-picker
+            v-model="state.axisForm.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeAxisStyle('color')"
+            :effect="themes"
+            is-custom
+          />
+        </el-form-item>
+        <el-form-item
+          class="form-item"
+          :class="'form-item-' + themes"
+          v-if="showProperty('fontSize')"
+          style="padding-left: 4px"
+        >
+          <el-tooltip :content="t('chart.font_size')" :effect="toolTip" placement="top">
+            <el-select
+              style="width: 108px"
+              :effect="props.themes"
+              v-model="state.axisForm.fontSize"
+              :placeholder="t('chart.axis_name_fontsize')"
+              @change="changeAxisStyle('fontSize')"
+            >
+              <el-option
+                v-for="option in fontSizeList"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-tooltip>
+        </el-form-item>
+      </div>
+    </div>
    <template v-if="showProperty('axisValue')">
      <el-divider class="m-divider" :class="'m-divider--' + themes" />

--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
@@ -155,61 +155,74 @@ onMounted(() => {
        </div>
      </el-radio-group>
    </el-form-item>
-    <el-form-item
-      class="form-item"
-      :class="'form-item-' + themes"
-      :label="t('chart.name')"
-      v-if="showProperty('name')"
-    >
-      <el-input
-        :effect="props.themes"
-        v-model="state.axisForm.name"
-        size="small"
-        maxlength="50"
-        @blur="changeAxisStyle('name')"
-      />
-    </el-form-item>

-    <div style="display: flex">
+    <el-form-item class="form-item" :class="'form-item-' + themes">
+      <el-checkbox
+        size="small"
+        :effect="props.themes"
+        v-model="state.axisForm.nameShow"
+        @change="changeAxisStyle('nameShow')"
+      >
+        {{ t('chart.axis_nameShow') }}
+      </el-checkbox>
+    </el-form-item>
+    <div style="margin-left: 22px">
      <el-form-item
        class="form-item"
        :class="'form-item-' + themes"
-        v-if="showProperty('color')"
-        :label="t('chart.chart_style')"
+        :label="t('chart.name')"
+        v-if="showProperty('name')"
      >
-        <el-color-picker
-          v-model="state.axisForm.color"
-          class="color-picker-style"
-          :predefine="predefineColors"
-          @change="changeAxisStyle('color')"
-          :effect="themes"
-          is-custom
+        <el-input
+          :effect="props.themes"
+          v-model="state.axisForm.name"
+          size="small"
+          maxlength="50"
+          @blur="changeAxisStyle('name')"
        />
      </el-form-item>
-      <el-form-item
-        class="form-item"
-        :class="'form-item-' + themes"
-        v-if="showProperty('fontSize')"
-        style="padding-left: 4px"
-      >
-        <template #label>&nbsp;</template>
-        <el-tooltip :content="t('chart.font_size')" :effect="toolTip" placement="top">
-          <el-select
-            style="width: 108px"
-            :effect="props.themes"
-            v-model="state.axisForm.fontSize"
-            :placeholder="t('chart.axis_name_fontsize')"
-            @change="changeAxisStyle('fontSize')"
-          >
-            <el-option
-              v-for="option in fontSizeList"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-tooltip>
-      </el-form-item>
+
+      <div style="display: flex">
+        <el-form-item
+          class="form-item"
+          :class="'form-item-' + themes"
+          v-if="showProperty('color')"
+          :label="t('chart.chart_style')"
+        >
+          <el-color-picker
+            v-model="state.axisForm.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeAxisStyle('color')"
+            :effect="themes"
+            is-custom
+          />
+        </el-form-item>
+        <el-form-item
+          class="form-item"
+          :class="'form-item-' + themes"
+          v-if="showProperty('fontSize')"
+          style="padding-left: 4px"
+        >
+          <template #label>&nbsp;</template>
+          <el-tooltip :content="t('chart.font_size')" :effect="toolTip" placement="top">
+            <el-select
+              style="width: 108px"
+              :effect="props.themes"
+              v-model="state.axisForm.fontSize"
+              :placeholder="t('chart.axis_name_fontsize')"
+              @change="changeAxisStyle('fontSize')"
+            >
+              <el-option
+                v-for="option in fontSizeList"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-tooltip>
+        </el-form-item>
+      </div>
    </div>

    <template v-if="showProperty('axisValue')">
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
@@ -121,62 +121,75 @@ onMounted(() => {
        <el-radio :effect="props.themes" label="right">{{ t('chart.text_pos_right') }}</el-radio>
      </el-radio-group>
    </el-form-item>
-    <el-form-item
-      class="form-item"
-      :class="'form-item-' + themes"
-      :label="t('chart.name')"
-      v-if="showProperty('name')"
-    >
-      <el-input
-        :effect="props.themes"
-        v-model="state.axisForm.name"
-        size="small"
-        maxlength="50"
-        @blur="changeAxisStyle('name')"
-      />
-    </el-form-item>

-    <div style="display: flex">
+    <el-form-item class="form-item" :class="'form-item-' + themes">
+      <el-checkbox
+        size="small"
+        :effect="props.themes"
+        v-model="state.axisForm.nameShow"
+        @change="changeAxisStyle('nameShow')"
+      >
+        {{ t('chart.axis_nameShow') }}
+      </el-checkbox>
+    </el-form-item>
+    <div style="margin-left: 22px">
      <el-form-item
        class="form-item"
        :class="'form-item-' + themes"
-        v-if="showProperty('color')"
-        style="padding-right: 4px"
-        :label="t('chart.chart_style')"
+        :label="t('chart.name')"
+        v-if="showProperty('name')"
      >
-        <el-color-picker
-          v-model="state.axisForm.color"
-          class="color-picker-style"
-          :predefine="predefineColors"
-          @change="changeAxisStyle('color')"
-          :effect="themes"
-          is-custom
+        <el-input
+          :effect="props.themes"
+          v-model="state.axisForm.name"
+          size="small"
+          maxlength="50"
+          @blur="changeAxisStyle('name')"
        />
      </el-form-item>
-      <el-form-item
-        class="form-item"
-        :class="'form-item-' + themes"
-        v-if="showProperty('fontSize')"
-        style="padding-left: 4px"
-      >
-        <template #label>&nbsp;</template>
-        <el-tooltip :content="t('chart.font_size')" :effect="toolTip" placement="top">
-          <el-select
-            style="width: 108px"
-            :effect="props.themes"
-            v-model="state.axisForm.fontSize"
-            :placeholder="t('chart.axis_name_fontsize')"
-            @change="changeAxisStyle('fontSize')"
-          >
-            <el-option
-              v-for="option in fontSizeList"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-tooltip>
-      </el-form-item>
+
+      <div style="display: flex">
+        <el-form-item
+          class="form-item"
+          :class="'form-item-' + themes"
+          v-if="showProperty('color')"
+          style="padding-right: 4px"
+          :label="t('chart.chart_style')"
+        >
+          <el-color-picker
+            v-model="state.axisForm.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeAxisStyle('color')"
+            :effect="themes"
+            is-custom
+          />
+        </el-form-item>
+        <el-form-item
+          class="form-item"
+          :class="'form-item-' + themes"
+          v-if="showProperty('fontSize')"
+          style="padding-left: 4px"
+        >
+          <template #label>&nbsp;</template>
+          <el-tooltip :content="t('chart.font_size')" :effect="toolTip" placement="top">
+            <el-select
+              style="width: 108px"
+              :effect="props.themes"
+              v-model="state.axisForm.fontSize"
+              :placeholder="t('chart.axis_name_fontsize')"
+              @change="changeAxisStyle('fontSize')"
+            >
+              <el-option
+                v-for="option in fontSizeList"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-tooltip>
+        </el-form-item>
+      </div>
    </div>

    <template v-if="showProperty('axisValue')">
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -592,6 +592,7 @@ export const DEFAULT_MARGIN_STYLE = {
 export const DEFAULT_XAXIS_STYLE: ChartAxisStyle = {
  show: true,
  position: 'bottom',
+  nameShow: false,
  name: '',
  color: '#333333',
  fontSize: 12,
@@ -637,6 +638,7 @@ export const DEFAULT_XAXIS_STYLE: ChartAxisStyle = {
 export const DEFAULT_YAXIS_STYLE: ChartAxisStyle = {
  show: true,
  position: 'left',
+  nameShow: false,
  name: '',
  color: '#333333',
  fontSize: 12,
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
@@ -415,7 +415,7 @@ export function getXAxis(chart: Chart) {
      const a = JSON.parse(JSON.stringify(customStyle.xAxis))
      if (a.show) {
        const title =
-          a.name && a.name !== ''
+          a.nameShow && a.name && a.name !== ''
            ? {
                text: a.name,
                style: {
@@ -501,7 +501,7 @@ export function getYAxis(chart: Chart) {
    return false
  }
  const title =
-    yAxis.name && yAxis.name !== ''
+    yAxis.nameShow && yAxis.name && yAxis.name !== ''
      ? {
          text: yAxis.name,
          style: {