Merge pull request #19228 from apache/feat-axis-align-lastLabel

feat(label): support align for min/max labels
apache · Dec 26, 2023 · b69e163 · b69e163
2 parents 34f81b6 + 3ea1970
commit b69e163
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 6 deletions.
diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts
@@ -17,7 +17,9 @@
 * under the License.
 */
 
-import {retrieve, defaults, extend, each, isObject, map, isString, isNumber, isFunction} from 'zrender/src/core/util';
+import {
+    retrieve, defaults, extend, each, isObject, map, isString, isNumber, isFunction, retrieve2
+} from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
 import {getECData} from '../../util/innerStore';
 import {createTextStyle} from '../../label/labelStyle';
@@ -776,6 +778,29 @@ function buildAxisLabel(
 
         const tickCoord = axis.dataToCoord(tickValue);
 
+        const align = itemLabelModel.getShallow('align', true)
+            || labelLayout.textAlign;
+        const alignMin = retrieve2(
+            itemLabelModel.getShallow('alignMinLabel', true),
+            align
+        );
+        const alignMax = retrieve2(
+            itemLabelModel.getShallow('alignMaxLabel', true),
+            align
+        );
+
+        const verticalAlign = itemLabelModel.getShallow('verticalAlign', true)
+            || itemLabelModel.getShallow('baseline', true)
+            || labelLayout.textVerticalAlign;
+        const verticalAlignMin = retrieve2(
+            itemLabelModel.getShallow('verticalAlignMinLabel', true),
+            verticalAlign
+        );
+        const verticalAlignMax = retrieve2(
+            itemLabelModel.getShallow('verticalAlignMaxLabel', true),
+            verticalAlign
+        );
+
         const textEl = new graphic.Text({
             x: tickCoord,
             y: opt.labelOffset + opt.labelDirection * labelMargin,
@@ -784,11 +809,12 @@ function buildAxisLabel(
             z2: 10 + (labelItem.level || 0),
             style: createTextStyle(itemLabelModel, {
                 text: formattedLabel,
-                align: itemLabelModel.getShallow('align', true)
-                    || labelLayout.textAlign,
-                verticalAlign: itemLabelModel.getShallow('verticalAlign', true)
-                    || itemLabelModel.getShallow('baseline', true)
-                    || labelLayout.textVerticalAlign,
+                align: index === 0
+                    ? alignMin
+                    : index === labels.length - 1 ? alignMax : align,
+                verticalAlign: index === 0
+                    ? verticalAlignMin
+                    : index === labels.length - 1 ? verticalAlignMax : verticalAlign,
                 fill: isFunction(textColor)
                     ? textColor(
                         // (1) In category axis with data zoom, tick is not the original

diff --git a/src/coord/axisCommonTypes.ts b/src/coord/axisCommonTypes.ts
@@ -17,6 +17,7 @@
 * under the License.
 */
 
+import { TextAlign, TextVerticalAlign } from 'zrender/src/core/types';
 import {
     TextCommonOption, LineStyleOption, OrdinalRawValue, ZRColor,
     AreaStyleOption, ComponentOption, ColorString,
@@ -223,6 +224,14 @@ interface AxisLabelBaseOption extends Omit<TextCommonOption, 'color'> {
     showMinLabel?: boolean,
     // true | false | null/undefined (auto)
     showMaxLabel?: boolean,
+    // 'left' | 'center' | 'right' | null/undefined (auto)
+    alignMinLabel?: TextAlign,
+    // 'left' | 'center' | 'right' | null/undefined (auto)
+    alignMaxLabel?: TextAlign,
+    // 'top' | 'middle' | 'bottom' | null/undefined (auto)
+    verticalAlignMinLabel?: TextVerticalAlign,
+    // 'top' | 'middle' | 'bottom' | null/undefined (auto)
+    verticalAlignMaxLabel?: TextVerticalAlign,
     margin?: number,
     rich?: Dictionary<TextCommonOption>
     /**

diff --git a/test/axis-align-lastLabel.html b/test/axis-align-lastLabel.html