Ovilia commented on code in PR #16825:
URL: https://github.com/apache/echarts/pull/16825#discussion_r978236387
##########
src/component/axis/AxisBuilder.ts:
##########
@@ -365,29 +366,47 @@ const builders: Record<'axisLine' | 'axisTickLabel' |
'axisName', AxisElementsBu
},
axisName(opt, axisModel, group, transformGroup) {
+ function calcDistanceToAxis() {
+ const defaultMargin = 10;
+ const axis = axisModel.axis;
+ const isHorizontal = axis.isHorizontal();
+ const labelUnionRect = estimateLabelUnionRect(axis);
+ if (!labelUnionRect) {
+ return 0;
+ }
+ const dim = isHorizontal ? 'height' : 'width';
+ const margin = axisModel.getModel('axisLabel').get('margin');
+ return labelUnionRect[dim] + margin + defaultMargin;
+ }
const name = retrieve(opt.axisName, axisModel.get('name'));
if (!name) {
return;
}
-
+ const isOutside = name === 'outsideStart' || name === 'outsideMiddle'
|| name === 'outsideEnd';
+ const labelGap = isOutside ? calcDistanceToAxis() : 0;
const nameLocation = axisModel.get('nameLocation');
const nameDirection = opt.nameDirection;
const textStyleModel = axisModel.getModel('nameTextStyle');
- const gap = axisModel.get('nameGap') || 0;
-
+ const gap = (axisModel.get('nameGap') || 0);
const extent = axisModel.axis.getExtent();
const gapSignal = extent[0] > extent[1] ? -1 : 1;
+
const pos = [
nameLocation === 'start'
? extent[0] - gapSignal * gap
+ : nameLocation === 'outsideStart'
+ ? extent[0] + gapSignal * (gap) + (nameDirection * labelGap)
Review Comment:
`'start'` and `'outsideStart'` can use the same logic because `labelGap` is
0 for `'start'`.
##########
src/component/axis/AxisBuilder.ts:
##########
@@ -365,29 +366,47 @@ const builders: Record<'axisLine' | 'axisTickLabel' |
'axisName', AxisElementsBu
},
axisName(opt, axisModel, group, transformGroup) {
+ function calcDistanceToAxis() {
+ const defaultMargin = 10;
Review Comment:
We should probably use
[xAxis.nameGap](https://echarts.apache.org/en/option.html#xAxis.nameGap)
instead. The document can be updated so that when the `nameLocation` is
`outsideXXX`, it means the distance between the axis name and the axis labels.
##########
src/coord/axisCommonTypes.ts:
##########
@@ -35,7 +35,7 @@ export interface AxisBaseOptionCommon extends ComponentOption,
inverse?: boolean;
// Axis name displayed.
name?: string;
- nameLocation?: 'start' | 'middle' | 'end';
+ nameLocation?: 'start' | 'middle' | 'end' | 'outsideStart' |
'outsideMiddle' | 'outsideEnd';
Review Comment:
Make this a new type and export it so that it can be used in `endTextLayout`.
##########
src/component/axis/AxisBuilder.ts:
##########
@@ -365,29 +366,47 @@ const builders: Record<'axisLine' | 'axisTickLabel' |
'axisName', AxisElementsBu
},
axisName(opt, axisModel, group, transformGroup) {
+ function calcDistanceToAxis() {
+ const defaultMargin = 10;
+ const axis = axisModel.axis;
+ const isHorizontal = axis.isHorizontal();
+ const labelUnionRect = estimateLabelUnionRect(axis);
+ if (!labelUnionRect) {
+ return 0;
+ }
+ const dim = isHorizontal ? 'height' : 'width';
+ const margin = axisModel.getModel('axisLabel').get('margin');
+ return labelUnionRect[dim] + margin + defaultMargin;
+ }
const name = retrieve(opt.axisName, axisModel.get('name'));
if (!name) {
return;
}
-
+ const isOutside = name === 'outsideStart' || name === 'outsideMiddle'
|| name === 'outsideEnd';
+ const labelGap = isOutside ? calcDistanceToAxis() : 0;
const nameLocation = axisModel.get('nameLocation');
const nameDirection = opt.nameDirection;
const textStyleModel = axisModel.getModel('nameTextStyle');
- const gap = axisModel.get('nameGap') || 0;
-
+ const gap = (axisModel.get('nameGap') || 0);
Review Comment:
```ts
const nameGap = axisModel.get('nameGap') || 0;
const gap = isOutside ? calcDistanceToAxis(nameGap) : nameGap;
```
And `labelGap` is not necessary any more.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
