diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts index c7b48dcafd..a3773a823c 100644 --- 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 index bb4d1b7bf1..aa92868e3e 100644 --- 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 { 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 /** diff --git a/test/axis-align-lastLabel.html b/test/axis-align-lastLabel.html new file mode 100644 index 0000000000..559f3b8365 --- /dev/null +++ b/test/axis-align-lastLabel.html @@ -0,0 +1,150 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + + + + + + + + +